Установка шрифта

Чтобы подключить шрифт Font Awesome на свой веб-сайт вы можете воспользоваться двумя способами:

  • Самый простой способ – это с помощью Bootstrap CDN. Для этого необходимо добавить одну строчку кода в раздел заголовка сайта. Ни чего загружать и устанавливать не надо.
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    
  • Второй способ заключается в скачивании шрифта Awesome со страницы проекта, его распаковки в каталог сайта и подключения CSS файла "font-awesome.min.css".
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    
    Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.

Использование иконок шрифта Awesome

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

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

Выше приведенный код будет выглядеть примерно так:

fa-camera-retro

Создание иконок увеличенного размера

Для увеличения размера иконок Вы можете воспользоваться классами 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-lg

fa-2x

fa-3x

fa-4x

fa-5x

Создание иконок с фиксированной шириной

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

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Главная</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  Книги</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  Статьи</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  Параметры</a>
</div>

Иконки для маркированных списков

С помощью классов fa-ul и fa-li Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Иконки Awesome</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>

  • Иконки Awesome
  • могут использоваться
  • как маркеры
  • неупорядоченных списков

Создание «вытянутых» иконок

Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

Создание вращающихся иконок

Для создания вращающейся иконки используйте класс fa-spin.

<button type="button" class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>

Создание повернутых и зеркально отраженных иконок

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

<i class="fa fa-shield"></i> иконка<br>
<i class="fa fa-shield fa-rotate-90"></i> иконка, повернутая на 90 градусов по часовой стрелки<br>
<i class="fa fa-shield fa-rotate-180"></i> иконка, повернутая на 180 градусов по часовой стрелки<br>
<i class="fa fa-shield fa-rotate-270"></i> иконка, повернутая на 270 градусов по часовой стрелки<br>
<i class="fa fa-shield fa-flip-horizontal"></i> иконка,отраженная по горизонтали<br>
<i class="fa fa-shield fa-flip-vertical"></i> иконка, отраженная по вертикали

иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали
иконка, отраженная по вертикали

Иконки, наложенные друг на друга

Чтобы наложить несколько иконок друг на друга, используйте класс "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>
иконка "Twitter" на иконке "квадрата"<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>
иконка "флага" на иконке "круга"<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>
иконка "терминала" на иконке "квадрата"<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>
иконка "запрещено" на иконке "камеры"

иконка "Twitter" на иконке "квадрата"
иконка "флага" на иконке "круга"
иконка "терминала" на иконке "квадрата"
иконка "запрещено" на иконке "камеры"