Иконки Font Awesome 4.7.0

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Используйте пустой тег <i> или <span> для размещения иконки на странице, например <i class="fa fa-font-awesome" aria-hidden="true"></i>. Другие способы вставки или модификации иконок можно посмотреть в примерах

Все категории

Веб-приложения

Элементы форм

Редактирование

Типы файлов

Видеоплеер

Стрелки и направления

Жесты

Специальные возможности

Медицина

Гендерные иконки

Транспорт

Платежные системы

Валюты

Диаграммы

Бренды

Вращающиеся иконки

Эти иконки работают с классами fa-spin и fa-pulse

Примеры

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

Используйте в имени класса префикc fa fa- и название иконки

bank arrows taxi


                <i class="fa fa-bank" aria-hidden="true"></i> bank
                <i class="fa fa-arrows" aria-hidden="true"></i> arrows
                <i class="fa fa-taxi" aria-hidden="true"></i> taxi

Размеры иконок

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


                <i class="fa fa-bank" aria-hidden="true"></i>
                <i class="fa fa-bank fa-lg" aria-hidden="true"></i>
                <i class="fa fa-bank fa-2x" aria-hidden="true"></i>
                <i class="fa fa-bank fa-3x" aria-hidden="true"></i>
                <i class="fa fa-bank fa-4x" aria-hidden="true"></i>
                <i class="fa fa-bank fa-5x" aria-hidden="true"></i>

Вращение иконок

Для поворота иконок используются классы fa-rotate-90, fa-rotate-180 и fa-rotate-270, для отзеркаливания fa-flip-horizontal и fa-flip-vertical

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


                <i class="fa fa-shield" aria-hidden="true"></i> normal

                <i class="fa fa-shield fa-rotate-90" aria-hidden="true"></i> fa-rotate-90
                <i class="fa fa-shield fa-rotate-180" aria-hidden="true"></i> fa-rotate-180
                <i class="fa fa-shield fa-rotate-270" aria-hidden="true"></i> fa-rotate-270
                <i class="fa fa-shield fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal
                <i class="fa fa-shield fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical

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

Для анимации иконок используются классы fa-spin и fa-pulse


                <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
                <i class="fa fa-cog fa-spin" aria-hidden="true"></i>
                <i class="fa fa-refresh fa-spin" aria-hidden="true"></i>
                <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>


                <i class="fa fa-circle-o-notch fa-pulse" aria-hidden="true"></i>
                <i class="fa fa-cog fa-pulse" aria-hidden="true"></i>
                <i class="fa fa-refresh fa-pulse" aria-hidden="true"></i>
                <i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>

Объединение иконок

Для объединения значков используйте класс 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-user fa-stack-1x"></i>

                </span>

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

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


                <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-border к значку, чтобы заключить его в рамку.
Классы fa-pull-left и fa-pull-right используются для обтекания иконки текстом слева и справа.


                 <i class="fa fa-exclamation-triangle fa-pull-left fa-border fa-2x" aria-hidden="true"></i> Добавьте класс <code>fa-border</code> к значку, чтобы заключить его в рамку.<br>Классы <code>fa-pull-left</code> и <code>fa-pull-right</code> используются для обтекания иконки текстом слева и справа.

Фиксированная ширина иконок

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

Иконки в списках

Используйте классы 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>