======Иконки веб-приложений Font Awesome======

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

  * <faicon fa fa-flag>  **Один шрифт, 675 иконок**
  * <faicon fa fa-ban>  **Нет необходимости в JavaScript**
  * <faicon fa fa-arrows-alt>  **Бесконечная масштабируемость**
  * <faicon fa fa-microphone>  **Бесплатно, как воздух**
  * <faicon fa fa-pencil>  **Управление через CSS**
  * <faicon fa fa-eye>  **Поддержка Retina-дисплеев**
  * <faicon fa fa-gamepad>  **Совместимость с фреймворками**
  * <faicon fa fa-desktop>  **Совместимость с настольными компьютерами**
  * <faicon fa fa-wheelchair>  **Доступность**

=====Примеры=====

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

====Базовые иконки====

<faicon fa fa-camera-retro>

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

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

<WRAP left round box 100%>
Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
</WRAP>

====Увеличенные иконки====

<faicon fa fa-camera-retro fa-lg> fa-lg
<faicon fa fa-camera-retro fa-2x>  fa-2x
<faicon fa fa-camera-retro fa-3x>  fa-3x
<faicon fa fa-camera-retro fa-4x>  fa-4x
<faicon fa fa-camera-retro fa-5x>  fa-5x

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

<code>
<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
</code>

<WRAP left round box 100%>
Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
</WRAP>

====Иконки с фиксированной шириной====

<faicon fa fa-home fa-fw>  Главная  
<faicon fa fa-book fa-fw>  Библиотека  
<faicon fa fa-pencil fa-fw>  Приложения  
<faicon fa fa-cog fa-fw>  Настройки  

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

<code>
<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>
</code>

====Иконки списков====

<faicon fa fa-check-square>  Иконки списков  
<faicon fa fa-check-square>  могут быть использованы  
<faicon fa fa-spinner fa-spin>  как маркеры   
<faicon fa fa-square>  в списках

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

<code>
<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>
</code>

====Обрамленные и вынесенные иконки====

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

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

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

====Анимированные иконки====

<faicon fa fa-spinner fa-spin fa-3x fa-fw>  
<faicon fa fa-circle-o-notch fa-spin fa-3x fa-fw>  
<faicon fa fa-refresh fa-spin fa-3x fa-fw>  
<faicon fa fa-cog fa-spin fa-3x fa-fw>  
<faicon fa fa fa-spinner fa-pulse fa-3x fa-fw>  

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

<code>
<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>
</code>

<WRAP left round box 100%>
На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект "безудержного веселья" у иконки. Читайте [[https://github.com/FortAwesome/Font-Awesome/issues/671|проблему #671]] для ознакомления с ней и изучения возможных решений.
</WRAP>

<WRAP left round box 100%>
 Анимация CSS3 не поддерживается в IE8 - IE9.
</WRAP>

====Повернутые и отзеркаленные иконки====

<faicon fa fa-shield> normal
<faicon fa fa-shield fa-rotate-90> fa-rotate-90
<faicon fa fa-shield fa-rotate-180>  fa-rotate-180
<faicon fa fa-shield fa-rotate-270>  fa-rotate-270
<faicon fa fa-shield fa-flip-horizontal>  fa-flip-horizontal
<faicon fa fa-shield fa-flip-vertical>  fa-flip-vertical

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

<code>
<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
</code>

=====Файлы для загрузки=====

{{ :software:development:web:docs:web:css:font-awesome-4.7.0.zip |font-awesome-4.7.0.zip}}

=====Ссылки и Дополнения=====

  * [[software:development:web:docs:web:css:font_awesome_all_icons|Все иконки Font Awesome]]
  * [[software:development:web:docs:web:css:font_awesome_examples|Примеры Font Awesome]]
  * [[https://fontawesome.ru/|Официальный сайт fontawesome]]