Как добавить иконки Font Awesome на сайт WordPress

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

Разберем, как просто добавить шрифты значков на сайт ВордПресс.

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

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

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

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

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

Админ-меню WordPress

Мы рассмотрим Font Awesome как самое популярное решение.

Как добавить Font Awesome в WordPress?

Рассмотрим 2 способа.

С помощью плагина

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

Для начала установите бесплатный плагин Font Awesome. После активации он уже работает для всего сайта.

Теперь можно вставлять иконки.

Например, в контенте. Для этого плагин предоставляет удобный шорткод. Например,

[icon name="rocket"]

Список всех иконок можете посмотреть на официальном сайте шрифта.

Блок Шорткод

На сайте это будет выглядеть так:

Запись на сайте

Этот шорткод можно использовать с другим текстом, в других блоках.

Например, в блоке Абзац. Изменяя размер шрифта в блоке, иконка тоже будет увеличиваться/уменьшаться.

Блок Абзац

Вручную с помощью кода

Иконки Font Awesome – это обычные шрифты. Их можно подключать из локального хранилища, а также удаленно (из серверов CDN).

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

Рассмотрим оба метода добавления.

Способ 1

Перейдите по адресу Font Awesome и введите свой email-адрес,  чтобы получить код для встраивания на сайт.

Сайт https://cdn.fontawesome.com/

Теперь проверьте свой почтовый ящик и найдите письмо. В нем будет ваш кодом для вставки. Скопируйте и вставьте его в файл header.php вашей активной темы перед тегом </head>.

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

<script src="https://use.fontawesome.com/12345678abcdef.js"></script>

Этот метод самый простой, но может вызвать конфликты с другими плагинами. Лучше использовать “правильные” средства WordPress для подключения и вызова JavaScript-скриптов.

Это будет такой код, который нужно добавить в functions.php:

function wpschool_load_fontawesome() {
    wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/12345678abcdef.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', wpschool_load_fontawesome);

Способ 2

Второй способ сложнее. Но он позволит разместить шрифты Font Awesome локально.

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

Загрузка шрифта Font Awesome

Распакуйте скачанный архив.

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

В нем создайте папку fonts и загрузите содержимое архива.

Теперь в functions.php добавьте PHP-строки, чтобы подключить Font Awesome:

function wpschool_load_fontawesome() {
    wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/fonts/css/fontawesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'wpschool_load_fontawesome' );

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

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

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

Иконка Font Awesome

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

<i class="fas fa-rocket"></i>
Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Задать вопрос