Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.

• Один шрифт, 675 иконок
• Нет необходимости в JavaScript
• Бесконечная масштабируемость
• Бесплатно, как воздух
• Управление через CSS
• Поддержка Retina-дисплеев
• Совместимость с фреймворками
• Совместимость с настольными компьютерами
• Доступность

После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>. Некоторые примеры были позаимствованы из документации Bootstrap.

Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).

<i class="fa fa-camera-retro"></i> fa-camera-retro

fa-lg fa-2x fa-3x fa-4x fa-5x

Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.

<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

Главная Библиотека Приложения Настройки

Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам. Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Главная</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Библиотека</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Приложения</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Настройки</a>
</div>

Иконки списков могут быть использованы как маркеры в списках

Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Иконки списков</li>
  <li><i class="fa-li fa fa-check-square"></i>могут быть использованы</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>как маркеры</li>
  <li><i class="fa-li fa fa-square"></i>в списках</li>
</ul>

…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...Душа моя озарена неземной радостью, как эти чудесные весенние утра,
которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в
здешнем краю, словно созданном для таких, как я.

Используйте класс fa-spin, чтобы заставить вращаться любую иконку, и используйте класс fa-pulse, чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner, fa-refresh, и fa-cog.

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical

Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-*.

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

font-awesome-4.7.0.zip

• Все иконки Font Awesome
• Примеры Font Awesome
• Официальный сайт fontawesome