Как подключить на сайт Font Awesome

О чем материал ?

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

Сегодня мы обсудим материал, как у себя на сайте подключить иконочный шрифт Font Awesome, благодаря которому, вы можете подключить у себя на сайте множество иконок, которые не создают нагрузки по скорости работы сайта и выполняют поставленную задачу по визуальному отображению элементов сайта. 

Преимущества Font Awesome

• Все иконки векторные и масштабируются в самых широких пределах, без ухудшения их качества.
• Поскольку иконка представляет собой текстовый символ, то к нему применяются любые стилевые свойства, доступные для шрифтов — допустимо изменять цвет, фон, добавлять тень и т. д.
• Иконки хорошо работают во всех браузерах, включая старый IE8.
• Иконки прекрасно сочетаются с различными фреймворками вроде Bootstrap.
• Font Awesome включает не только шрифт, но и стилевой файл, в котором уже прописано несколько типовых решений, вроде размеров иконок, поворота, выравнивания, добавления рамки и др. Достаточно только подключить стиль и назначить элементу нужный класс.
• Иконки можно поворачивать, анимировать и комбинировать между собой, накладывая одну иконку поверх другой. Это ещё больше расширяет возможное количество вариантов.
• Шрифт свободен для коммерческого использования.

Недостатки Font Awesome

• Символы могут быть только одного цвета. Это ограничение частично обходится объединением иконок разного цвета друг с другом, а также с помощью эффектов CSS.
• Font Awesome как и большинство универсальных библиотек слишком избыточна, поэтому ради десятка используемых на сайте иконок придётся подключать несколько сотен. В этом случае помогает собственная сборка, когда вы включаете в шрифт только те иконки, которые вам действительно нужны.

Установка Font Awesome

Перейдите на сайт Font Awesome и скачайте архив с последней версией. Внутри архива находится несколько папок, из которых нам важны css и fonts. Скопируйте их в свой проект. Если на сайте применяется Sass или Less, то понадобится и папка с соответствующим именем.

Теперь подключаем стилевой файл.

<link rel="stylesheet" href="/css/font-awesome.min.css">

Обратите внимание, что имеется два стилевых файла. Тот, что с min в названии, представляет собой сокращённый вариант за счёт выбрасывания переносов строк, пробелов и символов табуляции. Это позволяет сократить объём файла, но при этом редактировать его довольно затруднительно.

Также вы можете использовать CDN (Content Delivery Network, сеть доставки контента) и подключить стилевой файл следующим образом.

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

В этом случае вам не придётся загружать архив и разворачивать его на своём сайте, все шрифты для пользователя загрузятся с удалённого сервера.

Проверяем, как всё работает. Для этого добавим пару иконок и посмотрим, видны они или нет (пример 1).

Пример 1. Добавление иконок:

<i class="fa fa-html5 fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i>

пропишите в шаблоне в нужном вам месте в модуле где подключили фонт-авесоме и увидите как работают иконки.

Где выбрать или подобрать необходимые иконки Font Awesome ?

Подобрать можно на сайте: https://fontawesome.com/v4.7/icons/ достаточно перейти по выбранной вами иконке, далее скопировать код для отображения конки и встроить в шаблоне вашего сайта и готово.

Работа с иконками Font Awesome

Иконки выводятся через псевдокласс ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент <i>, но можно использовать и любой другой строчный элемент, например: <b>, <span> и др.

Для <i> указывается два основных класса — fa и fa-icon, где вместо icon пишется имя иконки. Все имена доступны на этой странице. Иконки разбиты по категориям, также есть поиск по ключевым словам.

Чтобы добавить иконку с именем play напишем следующий код:

<i class="fa fa-play"></i>

Сам элемент <i> пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.

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

Размер любой иконки из набора мы можем изменить с помощью свойства font-size, переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу <i> как показано в примере 1.

Пример 1. Размер иконок:

 <p><i class="fa fa-rouble fa-lg"></i> fa-lg</p>
 <p><i class="fa fa-rouble fa-2x"></i> fa-2x</p>
 <p><i class="fa fa-rouble fa-3x"></i> fa-3x</p>
 <p><i class="fa fa-rouble fa-4x"></i> fa-4x</p>
 <p><i class="fa fa-rouble fa-5x"></i> fa-5x</p>

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

Регулировка цвета для иконок Font Awesome

Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color, background, text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.

Пример 2. Оформление иконок через стили

 <style>
 .fa-bug { color: #f15a22; }
 .fa-book {
 background: #000; /* Чёрный цвет фона */
 padding: 2px 5px; /* Поля */
 border-radius: 3px; /* Радиус скругления */
 }
 .fa-car {
 color: #96c13c; /* Цвет иконки */
 text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
 }
 .fa-comment {
 color: #f7941e; /* Цвет иконки */
 text-shadow: 0 0 6px #000; /* Размытая тень */
 }
 </style>
 <p><i class="fa fa-bug fa-2x"></i></p>
 <p><i class="fa fa-book fa-2x fa-inverse"></i></p>
 <p><i class="fa fa-car fa-2x"></i></p>
 <p><i class="fa fa-comment fa-2x"></i></p>

Font Awesome вводит специальный класс fa-inverse, изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.

Поворот иконок Font Awesome

Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:

• fa-rotate-90 — поворот на 90º по часовой стрелке;
• fa-rotate-180 — поворот на 180º;
• fa-rotate-270 — поворот на 270º;
• fa-flip-horizontal — отражение по горизонтали;
• fa-flip-vertical — отражение по вертикали.

Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).

Пример 3. Поворот и отражение иконок

 <p><i class="fa fa-plane fa-2x"></i></p>
 <p><i class="fa fa-plane fa-rotate-90 fa-2x"></i></p>
 <p><i class="fa fa-plane fa-flip-horizontal fa-2x"></i></p>

Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.

Анимация в Font Awesome

Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.

<p><i class="fa fa-futbol-o fa-spin fa-2x"></i></p>

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

Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент <div> с классом fa-stack, а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x, в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.

<div class="fa-stack">
 <i class="fa fa-square fa-stack-2x"></i>
 <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</div>

Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).

Пример 4. Комбинация иконок

 <style>
 .fa-ban { 
 color: #d51920; /* Цвет */
 opacity: 0.6; /* Полупрозрачность */
 }
 </style>
 <div class="fa-stack">
 <i class="fa fa-bug fa-stack-1x"></i>
 <i class="fa fa-ban fa-stack-2x"></i>
 </div>

Многие примеры если они вам нужны, вы можете посмотреть на сайте: https://fontawesome.com/v4.7/examples/ и после исходя из примеров думать как использовать и что использовать.