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

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

Вы хотите добавить шрифты иконок на свой сайт WordPress? Недавно один из наших читателей спросил, какой самый простой способ добавить иконочные шрифты в свою тему WordPress?

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

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

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

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

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

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

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

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

Вот некоторые другие популярные шрифты-иконки:

В данном руководстве мы будем использовать шрифт 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 — еще один популярный плагин для построения страниц WordPress. Также в комплект входит несколько элементов, позволяющих использовать шрифты иконок, в том числе элемент Icon.

Иконка Elementor

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

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

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

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

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

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

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

Метод 1:

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

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

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

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

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

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

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

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

функция 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.

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

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

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

function wpb_load_fa() < wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . 'https://cdn.wpbeginner.com/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

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

 

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

.icons-group-item i < color: #333; font-size: 50px; >.icons-group-item i:hover

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий