Font-Awesome Как получить шрифты для масштабирования?

Я пытаюсь отчаянно пытаться увеличить шрифт увеличительного стекла. Код ниже отлично работает в firefox, но не в Chrome или IE9.

Что мне не хватает?

.icon-larger
{
   font-size:50px;
}

<div class="search-icon"><i class="icon-search icon-larger"></i></div>

спасибо!

Ответы

Ответ 1

Посмотрите на эту страницу и посмотрите примеры размеров значков значков.

Вы можете масштабировать его до 5 раз.

Пример:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Ответ 2

Значок шрифта Awesome привязан к: после псевдоэлемента, поэтому ваш CSS должен быть

.icon-larger:before 
{
  font-size: 50px;
}

Я создал справочную страницу всех значений содержимого CSS для Font Awesome вместе с фрагментом CSS, который показывает, как использовать значки с любым элементом: http://astronautweb.co/snippet/font-awesome/

Ответ 3

Добавить display:block или display:inline-block

Ответ 4

Старый вопрос, но у меня была такая же проблема, и оказалось, что я забыл включить Font Awesome css, например: <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

Вы по-прежнему увидите значок, но он не будет масштабироваться, если этого не хватает.