Меню

Better font awesome настройка

Плагин 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:

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

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

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

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

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

[icon name=»flag» ] [icon name=»icon-flag» ] [icon name=»fa-flag» ] [icon name=»icon-flag» ]

Здесь параметр 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 вы можете найти на его официальном сайте тут. Самый простой вариант вызова иконки выглядит так:

Читайте также:  Настройка буст контроллера greddy profec b spec 2

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

Источник

WordPress.org

Better Font Awesome

Description

Do you find this plugin helpful? Please consider leaving a 5-star review.

Better Font Awesome allows you to automatically integrate the latest available version of Font Awesome into your WordPress project, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator.

Features

Always up-to-date – automatically fetches the most recent available version of Font Awesome, meaning you no longer need to manually update the version included in your theme/plugin.

Backwards compatible – shortcode output is automatically updated depending on which version of Font Awesome you choose, meaning that you can switch versions without having to modify your shortcodes.

Compatible with other plugins – designed to work with shortcodes generated with plugins like Font Awesome Icons, Font Awesome More Icons, and Font Awesome Shortcodes, so you can switch to Better Font Awesome and your existing shortcodes will still work.

CDN speeds – Font Awesome CSS is pulled from the super-fast and reliable jsDelivr CDN.

Shortcode generator – includes an easy-to-use TinyMCE dropdown shortcode generator.

Settings

All settings can be adjusted via Settings → Better Font Awesome.

Usage

Better Font Awesome can be used in 3 different ways: shortcode, HTML, and TinyMCE

1. Shortcode

Note that prefixes ( fa- and icon- ) are not required, but if you do include them things will still work just fine! Better Font Awesome is smart enough to know what version of Font Awesome you’re using and correct of the appropriate prefix.

That means that all of the following shortcodes will work, regardless of what version of Font Awesome you choose:
[icon name=”flag” spin border”]
[icon name=”icon-flag” icon-spin icon-border”]
[icon name=”fa-flag” fa-spin fa-border”]
[icon name=”icon-flag” spin icon-border”]

You can read more about shortcode usage on Github

2. TinyMCE

Better Font Awesome also provides you with an easy-to-use drop down menu when editing in TinyMCE’s visual mode. Check out our Screenshots to see what it looks like.

3. HTML

Note that prefixes are required for HTML usage, and are version-specific. For this reason, shortcode usage is encouraged over HTML. If you do want to use HTML, however, you can read more on the Font Awesome site.

Advanced / Integration

Better Font Awesome is built around the Better Font Awesome Library. This library allows you to integrate Better Font Awesome into any custom project you want to create (perhaps a theme or plugin with a constantly up-to-date icon list), and includes all the filters you might need.

Читайте также:  Note 4 как сделать полный сброс настроек

Languages / Translations

Credits

Many thanks to the following plugins and their authors:

And many thanks to the following folks who helped with testing and QA:

Screenshots

Installation

This section describes how to install the plugin and get it working.

How is this plugin different from other Font Awesome plugins?

This plugin is unique in that it automatically pulls in all available versions of Font Awesome, meaning you never have to wait for the plugin developer to add the latest version. Furthermore, Better Font Awesome is designed to work with a wide variety of shortcode formats used by other Font Awesome plugins – this means that you can easily switch to Better Font Awesome (if, for example, you need to include icons from the most recent version of Font Awesome, which isn’t always available with other plugins), and they will still work.

Do I have to install any font files?

Nope. Better Font Awesome automatically pulls in everything you need, and it does it from the lightning-fast jsDelivr CDN.

What happens if I have another plugin/theme that uses Font Awesome?

Better Font Awesome does it’s best to load after any existing Font Awesome CSS, which can minimize conflicts. If you are experiencing any unexpected behavior resulting from plugin/theme conflicts, you can try checking the box to “Remove existing Font Awesome styles” in under Settings → Better Font Awesome.

Источник

WordPress.org

Русский

Better Font Awesome

Описание

Do you find this plugin helpful? Please consider leaving a 5-star review.

Better Font Awesome allows you to automatically integrate the latest available version of Font Awesome into your WordPress project, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator.

Особенности

Always up-to-date — automatically fetches the most recent available version of Font Awesome, meaning you no longer need to manually update the version included in your theme/plugin.

Backwards compatible — shortcode output is automatically updated depending on which version of Font Awesome you choose, meaning that you can switch versions without having to modify your shortcodes.

Compatible with other plugins — designed to work with shortcodes generated with plugins like Font Awesome Icons, Font Awesome More Icons, and Font Awesome Shortcodes, so you can switch to Better Font Awesome and your existing shortcodes will still work.

CDN speeds — Font Awesome CSS is pulled from the super-fast and reliable jsDelivr CDN.

Shortcode generator — includes an easy-to-use TinyMCE dropdown shortcode generator.

Настройки

All settings can be adjusted via Settings → Better Font Awesome.

Применение

Better Font Awesome может быть использован 3 разными способами: шорткод, HTML и TinyMCE

Читайте также:  Cisco meeting server настройка

1. Шорткод

Note that prefixes ( fa- and icon- ) are not required, but if you do include them things will still work just fine! Better Font Awesome is smart enough to know what version of Font Awesome you’re using and correct of the appropriate prefix.

That means that all of the following shortcodes will work, regardless of what version of Font Awesome you choose:
[icon name=»flag» spin border»]
[icon name=»icon-flag» icon-spin icon-border»]
[icon name=»fa-flag» fa-spin fa-border»]
[icon name=»icon-flag» spin icon-border»]

You can read more about shortcode usage on Github

2. TinyMCE

Better Font Awesome also provides you with an easy-to-use drop down menu when editing in TinyMCE’s visual mode. Check out our Screenshots to see what it looks like.

3. HTML

Note that prefixes are required for HTML usage, and are version-specific. For this reason, shortcode usage is encouraged over HTML. If you do want to use HTML, however, you can read more on the Font Awesome site.

Интеграция

Better Font Awesome is built around the Better Font Awesome Library. This library allows you to integrate Better Font Awesome into any custom project you want to create (perhaps a theme or plugin with a constantly up-to-date icon list), and includes all the filters you might need.

Языки / Переводы

Благодарности

Many thanks to the following plugins and their authors:

And many thanks to the following folks who helped with testing and QA:

Скриншоты

Установка

This section describes how to install the plugin and get it working.

Часто задаваемые вопросы

How is this plugin different from other Font Awesome plugins?

This plugin is unique in that it automatically pulls in all available versions of Font Awesome, meaning you never have to wait for the plugin developer to add the latest version. Furthermore, Better Font Awesome is designed to work with a wide variety of shortcode formats used by other Font Awesome plugins — this means that you can easily switch to Better Font Awesome (if, for example, you need to include icons from the most recent version of Font Awesome, which isn’t always available with other plugins), and they will still work.

Do I have to install any font files?

Nope. Better Font Awesome automatically pulls in everything you need, and it does it from the lightning-fast jsDelivr CDN.

What happens if I have another plugin/theme that uses Font Awesome?

Better Font Awesome does it’s best to load after any existing Font Awesome CSS, which can minimize conflicts. If you are experiencing any unexpected behavior resulting from plugin/theme conflicts, you can try checking the box to «Remove existing Font Awesome styles» in under Settings → Better Font Awesome.

Источник