Чтобы добавлять в текст красивые иконки, такие например:
необходимо установить в WordPress какой-нибудь так называемый иконический шрифт. Такие иконки и называются иконическим шрифтом.
Чтобы начать добавлять иконки в ваши посты, надо сделать следующее:
- Установите плагин Better Font Awesome,
- Ищите нужные иконки на страничке Font Awesome, затем кликайте на нужную иконку и на страничке иконки копируйте ее HTML-код и вставляйте в HTML-код своего поста.
Это все!
Если вы хотите узнать больше про иконические шрифты, про разные способы их добавления или хотите узнать, как поменять размер или цвет иконок, то читайте дальше.
Самые популярные иконические шрифты
Самый популярный шрифт с иконками – это Font Awesome, его мы и будем устанавливать. Другие известные мне иконические шрифты, это: Genericons, IcoMoon, Linearicons.
И есть еще один иконический шрифт, который называется
Dashicons
и который интересен тем, что этот шрифт встроен в WordPress, и его иконки вы можете увидеть в меню админки WordPress. Посмотреть его можно по этой ссылке на официальном сайте WordPress: Dashicons. Да, он красивый, да, он встроен в Вордпресс, но не радуйтесь: использовать его в своих постах на момент написания этой статьи не так уж и просто, если только вы не вставите в файл functions.php вот этот вот код:
/********************************************************/
// Adding Dashicons in WordPress Front-end
/********************************************************/
add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ );
function load_dashicons_front_end() {
wp_enqueue_style( ‘dashicons’ );
}
Работу этого кода я не проверял, нашел его здесь: Enable Dashicons in WordPress Frontend. Думаю, что все должно работать, так как подобный же код я видел и на других авторитетных сайтах.
– Какого черта? – ругаюсь я, – ведь все было бы так просто. Можно было бы просто вставлять иконки Dashicons в посты и все. Я стараюсь по возможности не трогать functions.php, поэтому лучше уж я установлю плагин для Font Awesome. Надеюсь, что в одном из обновлений WordPress разработчики добавят возможность вставлять Dashicons в посты.
Как установить иконки Font Awesome в WordPress
Есть два способа. Добавить код или установить плагин Better Font Awesome. Я буду использовать плагин, но можно установить Font Awesome, добавив следующий код в functions.php:
function wpb_load_fa() {
wp_enqueue_style( ‘wpb-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’ );
Как добавлять иконки Font Awesome в тексты WordPress
Итак, вы установили плагин Better Font Awesome. Как теперь добавлять иконки в посты? Есть два способа:
Использовать кнопку “Вставить иконку”,
которая появится в редакторе WordPress после установки плагина Better Font Awesome и будет выглядеть так:
.
Этот способ подойдет вам, если вас устроят серые иконки маленького размера. Но мне он не очень понравился, так как в результате в HTML вставляется такой вот код в квадратных скобках: icon name=”apple” class=”” unprefixed_class=””, в котором “apple” – это название иконки, а еще добавлено два пустых класса. Т.е. этот плагин добавляет избыточный код, а еще, чтобы поменять цвет и размер иконки, необходимо задавать класс в таблице стилей, что сложно. Поэтому я не использую этот способ, а использую следующий способ попроще.
Вставлять HTML-код с названием иконки
Если мы хотим добавить такую иконку 
например, то сначала находим ее на сайте Font Awesome, а затем кликаем на иконку и попадаем на страничку, посвященную этой иконке: fontawesome.io/icon/apple. На этой страничке написан HTML-код иконки:
<i class=”fa fa-apple” aria-hidden=”true”> </i>.
Надо просто скопировать его и вставить в HTML-код нашей странички. Это действительно самый легкий способ!
Как изменить размер иконки Font Awesome
Чтобы изменить размер иконки Font Awesome, необходимо добавить код размера в HTML-код иконки (обязательно в то же место, как указано ниже – перед закрывающими кавычками class):
<i class=”fa fa-apple fa-3x” aria-hidden=”true”> </i>, где
- fa-lg – 33% увеличение;
- fa-2x – двухкратное увеличение;
- fa-3x – трехкратное увеличение;
- fa-4x – четырехкратное увеличение;
- fa-5x – пятикратное увеличение.
Таким образом, добавив код fa-3x, мы увеличили нашу иконку в три раза:
Как изменить цвет иконки Font Awesome
Для изменения цвета нашей иконки добавим в код иконки код стиля с указанием цвета:
<i class=”fa fa-apple fa-3x” aria-hidden=”true” style=”color: green;”> </i>.
В качестве кода цвета можно использовать любой из кодов цветов, указанных на сайте: htmlcolorcodes.com/color-names/, при этом можно использовать как названия цветов на английском языке, так и их коды, указанные там же.
Таким образом, после добавления style=”color:green” наша иконка стала зеленой:
Дополнительные возможности иконок Font Awesome
С иконками Font Awesome можно сделать еще много красивых и интересных вещей. Какие еще есть возможности, можно посмотреть по этой ссылке: fontawesome.io/examples/.
Заключение
С одной стороны, когда разберешься, то не так уж все и сложно, а с другой стороны, очень хотелось бы, чтобы появилась возможность просто копировать и вставлять нужные иконки, а потом менять их размер и цвет так же, как размер и цвет обычного шрифта без правки HTML-кода.
Может быть, это реализовано в одном из плагинов? А может, вы знаете более простой способ добавлять иконки? Если да, то поделитесь, пожалуйста, в комментариях.
Я много лет пользовался плагином Better Font Awesome, но потом оказалось, что он “сжирает” почти 1,5 секунды скорости загрузки на каждой странице сайта (даже на тех странцах, где не использовался иконический шрифт!). Теперь я сам не использую его и вам не рекомендую.
Иконическими шрифтами я больше не пользуюсь, но если бы и стал использовать, то в первую очередь попробовал бы Dashicons, но обязательно проверил бы как использование этого шрифта влияет на скорость загрузки сайта. Также можно попробовать все-таки использовать Font Awesome, но без плагина.
Пост опубликован 6 февраля 2017, обновлен 13.07.2020.
