Плагин Better Font Awesome — подключаем иконочный шрифт на WordPress

В очередной раз сделаем заметку о неотъемной части сайта, а именно — об иконках на основе шрифта Font Awesome. В сети Интернета он имеет довольно большую популярностью за счет огромного набора векторных иконок и своей простотой в использовании. В одной из статей мы рассматривали пару вариантов подключения Font Awesome в ручном порядке, то есть, редактируя файлы темы. На этот раз будем применять плагин, который автоматически интегрирует шрифт в вашу текущую тему.

Плагин Better Font Awesome

Плагин Better Font Awesome

Данный плагин представляет из себя автоматический инструмент в подключении иконочного шрифта самой актуальной его версии, или определенной, выбирая из списка доступных. Иконки можно добавлять в вашу тему четырьмя способами: HTML-теги с определенными классами, шорткоды, через редактор и последнее – псевдоэлементы CSS.

Некоторые особенности:

  • Подключение шрифта через CDN (Сеть доставки)
  • Всегда подключает актуальную на данный момент версию шрифта
  • Совместимость с похожими плагинами. Это на случай, если вместо другого подобного модуля установите этот.

Better Font Awesome

Как пользоваться плагином Better Font Awesome

Как только установите плагин и активируйте его, то во вкладке «Настройки» добавится новый раздел «Better Font Awesome». На этой странице будет всего лишь 4 пункта параметров: выбор версии или всегда актуальную, подключение сокращенного файла стилей (.min.css) или нет, попытка удалить существующее подключение шрифта (если изначально такое имеется в вашей теме) и оповещение при возникновении ошибок. Все можно оставить по умолчанию.

setting Font Awesome

И чуток ниже параметров есть примеры иконок с тегом <i> и шорткодами, а также ссылка на более развернутые примеры. Как использовать иконки через псевдоэлемент, читайте выше по ссылке.

А также в разделе добавления статьи сверху редактора появится новая кнопка «insert icon», по нажатию на которую откроется меню со всеми иконками и строкой поиска. Таким путем можно очень легко вставлять иконки прямо в текст статьи.

Awesome button

Параметры иконок

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

Стилизация

К примеру, вы через редактор добавляете иконку в виде шорткода. Он будет выглядеть вот так:

[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=""]

Больше примеров найдете по ссылке внутри плагина.

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *