Примеры

Несколько простых примеров, показывающих как пользоваться Font Awesome

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

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Пример: Базовые иконки fa-camera-retro

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

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.

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
  • Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.

Используйте класс 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-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)

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

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект "безудержного веселья" у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.

На заметку: Анимация CSS3 не поддерживается в IE8 - IE9.

  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
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera

Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter на fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag на fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal на fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban на fa-camera

Font Awesome прекрасно работает со всеми компонентами Bootstrap.

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Удалить</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Настройки</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Версия 4.7.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-left" title="Align Left"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-center" title="Align Center"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-right" title="Align Right"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-justify" title="Align Justify"></i>
  </a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Ваш Email">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Пароль">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> Пользователь</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Редактировать</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Удалить</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Забанить</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> Дать права администратора</a></li>
  </ul>
</div>

Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.

Пример рейтинга (позаимствовано из CSS Tricks)

Обновление... Сохранение. Держитесь крепче!

Уровень заряда: 50%

Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.

<a class="btn btn-default" href="path/to/settings" aria-label="Настройки">
  <i class="fa fa-cog" aria-hidden="true"></i>
</a>

<a class="btn btn-danger" href="path/to/settings" aria-label="Удалить">
  <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

<a class="btn btn-primary" href="#navigation-main" aria-label="Перейти к основному меню">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Обновление...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Сохранение. Держитесь крепче!</span>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="Ваш email">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="password" placeholder="Пароль">
</div>
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="Посмотреть 3 предмета в вашей корзине">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Уровень заряда: 50%</span>