Работа с иконками
Иконки выводятся через псевдокласс ::before , поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент , но можно использовать и любой другой строчный элемент, например: , и др.
Для указывается два основных класса — fa и fa-icon , где вместо icon пишется имя иконки. Все имена доступны на этой странице.
Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).
Рис. 1. Иконки для видеоплеера
Чтобы добавить иконку с именем play напишем следующий код:
Сам элемент пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.
Размеры иконок
Размер любой иконки из набора мы можем изменить с помощью свойства font-size , переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу как показано в примере 1.
Пример 1. Размер иконок
Font Awesome Исходный размер
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Результат данного примера показан на рис. 2.
Рис. 2. Размеры иконок
Цвета
Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color , background , text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.
Пример 2. Оформление иконок через стили
Font Awesome Результат данного примера показан на рис. 3.
Рис. 3. Цветные иконки
Font Awesome вводит специальный класс fa-inverse , изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.
Поворот иконок
Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:
- fa-rotate-90 — поворот на 90º по часовой стрелке;
- fa-rotate-180 — поворот на 180º;
- fa-rotate-270 — поворот на 270º;
- fa-flip-horizontal — отражение по горизонтали;
- fa-flip-vertical — отражение по вертикали.
Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).
Пример 3. Поворот и отражение иконок
Font Awesome Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.
Рис. 4. Преобразования иконки
Анимация
Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.
Объединение иконок
Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент с классом fa-stack , а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x , в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.
Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).
Пример 4. Комбинация иконок
Font Awesome