Дек

Плагин Better Font Awesome — простое использование шрифта иконок

Несколько недель назад я писал о работе с интересном шрифтом Font Awesome, что вместо букв содержит иконки. С его помощью вы легко можете добавить в текст или на сайт симпатичные иконки, которые легко поддаются изменению цвета, размера также как и обычные символы любого другого шрифта. При этом они грузятся быстрее картинок и поддерживаются всеми браузерами. Так вот для тех, кому сложно заниматься подключением шрифта через functions.php предлагаю использовать плагин Better Font Awesome. Он упростит процесс и сделает его более наглядным.

Найти и скачать модуль Better Font Awesome вы можете здесь. После этого распаковываете архив и загружаете папку на ФТП в директорию /wp-content/plugins/. Далее активируете плагин либо же изначально производите установку Better Font Awesome из админки вордпресс. После включения модуля вы можете добавить иконки на сайт тремя разными способами — через графический редактор HTML или шорткоды. Во время написания поста последняя версия модуля была 1.0.6 и поддерживала WordPress от 3.0 до 4.1.

Основные плюсы плагина Better Font Awesome:

Позволяет использовать самую последнюю версию шрифтов Font Awesome, автоматически проверяя обновления на официальном сайте. Тем не менее, вы можете выбрать в настройках плагина нужную вам версию шрифта.
Обратная совместимость — используемый вами шорткод подстраивается под версию Font Awesome, указанную вами в админке, поэтому если вдруг решите ее изменисять, вам не нужно будет править все шорткоды на сайте.
Совместимость с другими плагинами — допускается подключение данного модуля вместе с Font Awesome Icons, Font Awesome Shortcodes или Font Awesome More Icons. При этом все добавленные ранее иконки будут работать.
CDN — быстрая работая плагина за счет использования jsDelivr CDN.
Генератора шорткодов, который поддерживается текстовым редактором.

Добавление Better Font Awesome на сайт

Как я уже сказал выше, размещать иконки можно через HTML, шорткоды и текстовый редактор.

1. Вставка Better Font Awesome через шорткоды

Шорткоды вы можете использовать для добавления иконок в посты блога, страницы и даже виджеты. При этом вам не нужно будет заморачиваться относительно HTML тегов. Для шорткодов не требуется указание fa- и icon-, пишется просто название (хотя, если укажете, все будет тоже работать).

Вот пример кода вызова разных шорткодов с одним и тем же результатом — вращающейся иконкой флага в рамке.

[icon name="flag" class="2x spin border"]
 
[icon name="icon-flag" class="icon-2x icon-spin icon-border"]
 
[icon name="fa-flag" class="fa-2x fa-spin fa-border"]
 
[icon name="icon-flag" class="fa-2x spin icon-border"]

Здесь параметр name отвечает за отображение соответствующей иконки, а в class задается ее формат: 2x — увеличенный в 2 раза размер, spin — вращение, border — рамка. В общем, поддерживается разный синтаксис для шорткодов.

В большинстве случаев вам просто достаточно указать название иконки, например:

[icon name=star]
 
[icon name=bell]
 
[icon name=cloud]

Подробнее об использовании форматов иконок можно посмотреть тут.

2. Добавление Better Font Awesome через текстовый редактор

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

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

3. Добавление Better Font Awesome через HTML

Все примеры использования шрифта Font Awesome через HTML вы можете найти на его официальном сайте тут. Самый простой вариант вызова иконки выглядит так:

<em class="fa fa-wordpress"></em> wordpress icon

Кроме этого, можно задавать размеры иконкам, рамку, вращение, повороты, фиксированную ширину, использовать их для списков и т.п. В целом Font Awesome очень крутая штука, а Better Font Awesome максимально упрощает процесс использования этого шрифта.