После того, как вы подключили 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
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> Главная</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Библиотека</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Приложения</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Настройки</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-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)
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
<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>