В очередной раз сделаем заметку о неотъемной части сайта, а именно — об иконках на основе шрифта Font Awesome. В сети Интернета он имеет довольно большую популярностью за счет огромного набора векторных иконок и своей простотой в использовании. В одной из статей мы рассматривали пару вариантов подключения Font Awesome в ручном порядке, то есть, редактируя файлы темы. На этот раз будем применять плагин, который автоматически интегрирует шрифт в вашу текущую тему.
Плагин Better Font Awesome
Данный плагин представляет из себя автоматический инструмент в подключении иконочного шрифта самой актуальной его версии, или определенной, выбирая из списка доступных. Иконки можно добавлять в вашу тему четырьмя способами: HTML-теги с определенными классами, шорткоды, через редактор и последнее – псевдоэлементы CSS.
Некоторые особенности:
- Подключение шрифта через CDN (Сеть доставки)
- Всегда подключает актуальную на данный момент версию шрифта
- Совместимость с похожими плагинами. Это на случай, если вместо другого подобного модуля установите этот.
Как пользоваться плагином Better Font Awesome
Как только установите плагин и активируйте его, то во вкладке «Настройки» добавится новый раздел «Better Font Awesome». На этой странице будет всего лишь 4 пункта параметров: выбор версии или всегда актуальную, подключение сокращенного файла стилей (.min.css
) или нет, попытка удалить существующее подключение шрифта (если изначально такое имеется в вашей теме) и оповещение при возникновении ошибок. Все можно оставить по умолчанию.
И чуток ниже параметров есть примеры иконок с тегом <i>
и шорткодами, а также ссылка на более развернутые примеры. Как использовать иконки через псевдоэлемент, читайте выше по ссылке.
А также в разделе добавления статьи сверху редактора появится новая кнопка «insert icon», по нажатию на которую откроется меню со всеми иконками и строкой поиска. Таким путем можно очень легко вставлять иконки прямо в текст статьи.
Параметры иконок
Давайте вкратце пробежимся по параметрам и рассмотрим, как стилизовать определенные иконки, устанавливать размер без своих стилей, поворачивать, анимировать и другие детали.
Стилизация
К примеру, вы через редактор добавляете иконку в виде шорткода. Он будет выглядеть вот так:
[icon name="cogs" class="" unprefixed_class=""]
Для стилизации именно этой иконки нужно добавить к ней свой класс и к этому классу автоматом добавится префикс fa-
. Вот так будет выглядеть код с классом:
[icon name="cogs" class="wsmall" unprefixed_class=""]
А в исходном коде, если посмотреть что вышло, то будет такой код:
<i class="fa fa-cogs fa-wsmall"></i>
Стало быть, стили прописываем таким образом:
i.fa-wsmall { color: #34aed1; border: 1px solid #34aed1; padding: 10px; border-radius: 5px; }
Размер иконки
Благодаря определенным классам у нас есть возможность манипулировать иконками, при этом не прописывать никаких своих стилей. Размер иконки можно задать с помощью класса fa-2x
до fa-5x
.
[icon name="cogs" class="wsmall fa-3x" unprefixed_class=""]
Анимация
В комплекте присутствует круговая анимация двух скоростей: fa-pulse
– вращение восьми шагами, fa-spin
– плавная. И, конечно, можно анимировать иконки, используя любую другую анимацию.
[icon name="cogs" class="wsmall fa-2x fa-spin" unprefixed_class=""]
Больше примеров найдете по ссылке внутри плагина.