Как легко добавлять иконки шрифтов в тему WordPress

Хотите добавить иконки шрифтов на свой сайт WordPress? Недавно один из наших читателей спросил, как проще всего добавить иконки в их тему WordPress.?


Иконочные шрифты позволяют добавлять векторные (изменяемые размеры) иконки, не замедляя работу вашего сайта. Они загружаются как веб-шрифты и могут быть стилизованы с использованием CSS.

В этой статье мы покажем вам, как легко добавлять шрифты значков в тему WordPress, шаг за шагом..

Использование значков шрифтов с любой темой WordPress

Что такое Icon Fonts и почему вы должны их использовать?

Иконочные шрифты содержат символы или пиктограммы вместо букв и цифр. Эти пиктограммы могут быть легко добавлены к контенту сайта и изменены с помощью CSS. По сравнению с иконками, основанными на изображениях, иконки шрифтов намного быстрее, что помогает увеличить скорость работы вашего сайта WordPress..

Предварительный просмотр шрифтов

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

Существует несколько бесплатных шрифтов с открытым исходным кодом, которые имеют сотни красивых иконок..

На самом деле, каждая установка WordPress поставляется с набором бесплатных шрифтов-иконок. Эти значки используются в меню администратора WordPress и других областях внутри области администрирования WordPress..

Некоторые другие популярные шрифты значков:

  • Font Awesome
  • Genericons
  • IcoMoon
  • Linearicons
  • Значки материалов от Google
  • Существительное Проект

Для этого урока мы будем использовать Font Awesome. Это самый популярный бесплатный шрифт с открытым исходным кодом. Мы используем FontAwesome на веб-сайте WPBeginner, а также наши плагины для WordPress, такие как OptinMonster, WPForms, RafflePress и т. Д..

В этом руководстве мы рассмотрим три способа добавления шрифтов значков в WordPress. Вы можете выбрать решение, которое лучше всего подходит для вас.

Добавление шрифтов иконок в WordPress с помощью плагинов

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

Первое, что вам нужно сделать, это установить и активировать плагин Font Awesome для WordPress. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress..

После активации плагин включает поддержку Font Awesome для вашей темы. Теперь вы можете редактировать любой пост или страницу WordPress и использовать шорткод со значком, например так:

Вы можете использовать этот шорткод вместе с другим текстом или отдельно в выделенном блоке шорткода.

Добавление шорткода шрифта иконки в WordPress

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

Предварительный просмотр иконки

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

Увеличить размер иконки

При увеличении размера текста это может выглядеть странно внутри текстового редактора. Это потому, что шорткод автоматически не превращается в значок шрифта в редакторе блоков.

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

Увеличен шрифт иконки

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

Использование значков шрифтов в функциональных блоках

2. Использование иконок-шрифтов в WordPress Page Builder

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

Строитель Бобров

Beaver Builder – лучший плагин для WordPress по созданию страниц на рынке. Это позволяет вам легко создавать собственные макеты страниц в WordPress без написания кода.

Beaver Builder поставляется с красивыми иконками и готовыми к использованию модулями, которые вы можете просто перетащить в свой пост и на страницы..

Модули Beaver Builder

Вы можете создавать группы значков, добавлять один значок и перемещать их в хорошо расположенные строки и столбцы. Вы также можете выбрать свои собственные цвета, фон, интервалы и поля без написания CSS.

Редактировать иконки шрифтов в Beaver Builder

Вы даже можете создавать полностью настраиваемые темы WordPress без написания кода с помощью продукта Themer от Beaver Builder..

Elementor Pro

Elementor – еще один популярный плагин для WordPress. Он также поставляется с несколькими элементами, которые позволяют использовать шрифты значков, включая элемент Icon..

Элементор значок

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

Другие популярные конструкторы страниц, такие как Divi и Visual Composer, также имеют полную поддержку шрифтов значков..

3. Добавление шрифтов значков в WordPress вручную с помощью кода

Как мы упоминали ранее, иконки-шрифты являются просто шрифтами и могут быть добавлены на ваш сайт, как если бы вы добавили любые пользовательские шрифты.

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

Вы также можете загрузить весь каталог шрифтов в папку в своей теме WordPress, а затем использовать эти шрифты в своей таблице стилей..

Так как мы используем Font Awesome для этого урока, мы покажем вам, как вы можете добавить его, используя оба метода.

Способ 1:

Этот ручной метод довольно прост.

Во-первых, вам нужно зайти на сайт Font Awesome и ввести свой адрес электронной почты, чтобы получить код для встраивания..

Получить Font Awesome код для вставки

Теперь проверьте свой почтовый ящик на наличие письма от Font Awesome с вашим кодом для вставки. Скопируйте и вставьте этот код встраивания в файл header.php вашей темы WordPress непосредственно перед тегом.

Код для встраивания будет одной строкой, которая будет загружать библиотеку Font Awesome напрямую со своих серверов CDN. Это будет выглядеть примерно так:

Этот метод самый простой, но он может вызвать конфликты с другими плагинами.

Лучшим подходом было бы правильно загрузить JavaScript в WordPress, используя встроенный механизм постановки в очередь..

Вместо ссылки на таблицу стилей из шаблона заголовка вашей темы, вы можете добавить следующий код в файл functions.php вашей темы или в плагин для сайта.

function wpb_load_fa () {

wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array (), ‘1.0.0’, true);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Способ 2:

Второй способ не самый простой, но он позволит вам размещать иконки Font Awesome на вашем собственном веб-сайте..

Во-первых, вам нужно посетить веб-сайт Font Awesome, чтобы загрузить пакет шрифтов на свой компьютер..

Скачайте иконку шрифта на свой компьютер

Просто скачайте значок шрифтов и разархивируйте пакет.

Теперь вам нужно подключиться к вашему хостингу WordPress с помощью FTP-клиента и перейти в каталог вашей темы WordPress..

Вам нужно создать новую папку и назвать ее шрифтами. Затем вам необходимо загрузить содержимое папки значков шрифтов в каталог шрифтов на вашем сервере веб-хостинга..

Загрузка значков шрифтов в вашу тему WordPress

Теперь вы готовы загрузить иконки шрифтов в вашу тему WordPress. Просто добавьте этот код в файл functions.php вашей темы или в плагин для конкретного сайта.

function wpb_load_fa () {

wp_enqueue_style (‘wpb-fa’, get_stylesheet_directory_uri (). ‘/fonts/css/font-awesome.min.css’);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

Вы успешно загрузили Font Awesome в свою тему WordPress.

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

Отображение шрифтов значков в WordPress вручную

Перейдите на веб-сайт Font Awesome, чтобы увидеть полный список доступных значков. Нажмите на любой значок, который вы хотите использовать, и вы сможете увидеть имя значка.

Название иконы
Скопируйте имя иконки и используйте его в WordPress.

Вы можете стилизовать этот значок в таблице стилей вашей темы следующим образом:

.fa-arrow-alt-circle-up {
Размер шрифта: 50px;
цвет: # FF6600;
}

Вы также можете комбинировать различные значки и стилизовать их сразу. Например, допустим, вы хотите отобразить список ссылок со значками рядом с ними. Вы можете обернуть их в элемент с определенным классом.

Дом
Библиотека
Приложения
настройки

Теперь вы можете стилизовать их в таблице стилей вашей темы следующим образом:

.иконки-группа-элемент я {
цвет: # 333;
размер шрифта: 50 пикселей;
}
.icons-group-item i: hover {
цвет: # FF6600
}

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me