Вы здесь: Главная » Wordpress » Как добавить иконки Font Awesome в меню WordPress

Как добавить иконки Font Awesome в меню WordPress

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

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

В результате вы получите простое меню с иконками из набора Font Awesome:

Стилизация меню с иконками

Последовательность добавления иконок в меню

Вот те шаги, которые вам нужно сделать для добавления иконок в меню:

  1. Создайте дочернюю тему, если используете одну из тех, которые будут обновляться, либо воспользуйтесь файлом functions.php, если работаете со своей собственной темой.
  2. Добавьте код загрузки библиотеки Font Awesome в файла функций вашей темы, используя функцию wp_enqueue_style() или wp_enqueue_scripts().
  3. Добавьте CSS-классы к элементам в меню навигации через админку WordPress.
  4. Добавьте стили для пунктов меню в файл style.css вашей основной или дочерней темы.

Рассмотрим все шаги подробнее.

Шаг 1. Создание дочерней темы

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

Если вы не хотите создавать дочернюю тему или пишите свою, то весь код нужно разместить в файлах functions.php  и style.css вашей темы.

Шаг 2. Добавляем Font Awesome в функции темы

Font Awesome - это библиотека иконок, созданных с использованием иконочного шрифта. Это означает, что в нем иконки представляют собой шрифт, а не изображения, хотя есть также способ добавить иконки в виде svg-картинок с помощью скрипта. Кроме того, в Font Awesome используется большое количество классов CSS, реализованные через добавление псевдоэлемента ::before с символом иконки. В итоге вы получаете иконку, которая выводится непосредственно перед элементом, для которого вы добавили класс CSS.

Пока еще актуальная версия Font Awesome 5.15, хотя на официальном сайте представлена также версия 6.

Оффсайт Font Awesome

Мы будем использовать загрузку css-файла с библиотекой Font Awesome по ссылке на CDN. Для этого создайте новый файл с именем functions.php в папке вашей темы, если еще этого не сделали. Если в вашей дочерней/основной теме уже есть файл функций, откройте его и добавьте в него этот код и сохраните файл:

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

Проверить, что файл с fontawesome.css подключился, можно нажать CTRL + U или выбрать Просмотр кода в контекстном меню при клике на любой странице сайта. Затем нажмите CTRL + F (поиск) и введите font-awesome или часть этого слова:

Проверяем подключение font-awesome.css

Имейте ввиду, что ряд тем и плагинов уже используют эту библиотеку в качестве оформления различных блоков с иконками. Долгое время очень популярной была версия Font Awesome 4.n, которая может быть подключена не в теме, а в плагине. Подключать разные версии этой библиотеки не стоит, т.к. многие иконки в них похожи, но при этом вы будете загружать лишние килобайты шрифтов. А это плохо с точки зрения оптимизации вашего сайта под поисковые системы.

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

Шаг 3. Добавление классов к пунктам меню

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

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

WordPress позволяет вам добавить класс CSS к каждому элементу вашего меню, но вы не можете видеть это поле по умолчанию. Для этого вам нужно сначала включить его:

  1. Вверху экрана щелкните вкладку Настройки экрана.
  2. Убедитесь, что установлен флажок «Классы CSS».
  3. Закройте вкладку «Настройки экрана».

Настройки экрана меню

Теперь вы можете добавить класс к каждому пункту меню. Начните с главной страницы. Рядом с пунктом меню щелкните стрелку вниз, чтобы просмотреть дополнительные параметры, относящиеся к этому пункту меню. В поле «Классы CSS» введите fas fa-lg fa-home.

Классы меню в WordPress

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

Здесь вы видите 3 класса из набора Font Аwesome:

  • fas или far для указания, какой набор иконок Font Awesome используется (solid, regular)
  • fa-lg для указания увеличенного размера иконок
  • fa-home как определенная иконка для определенной страницы.
Теперь вам нужно повторить добавление классов для всех пунктов меню. Для того чтобы определиться с нужными классами, используйте набор бесплатных иконок с Font Awesome.

Например, вы можете указать такие классы для страниц:

  • О нас: fas fa-lg fa-book
  • Услуги: fas fa-lg fa-chart-bar
  • Портфолио: fas fa-lg fa-camera-retro
  • Статьи: far fa-lg fa-newspaper
  • Контакты: far fa-lg fa-envelo

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

Шаг 4. Стилизация пунктов меню с классами Font Awesome

После сохранения меню и обновления страницы вы увидите, скорей всего, не совсем то меню, которое ожидаете:

Меню с иконками без стилей

Иконки "уехали" вверх и расположились над текстом вместо того, чтобы быть слева и вровень с ссылками. То есть пришло время поработать над стилями.

Следует отметить, что стилевые свойства будут напрямую зависеть от тех, которые у вас прописаны в теме. Поэтому приведенные здесь вам могут не подойти. Используйте свой id и классы для формирования отступов и размещения псевдоэлементов.

Записывать стили будем в файле style.css дочерней темы:

Теперь внешний вид уже лучше:

Стилизация меню с иконками

На данный момент мы проделали все шаги и закончили меню с иконками.

Резюме

Добавление иконок с помощью библиотеки Font Awesome на ваш сайт - это достаточно простой процесс за счет уже созданных в ней классов для встраивания определенных иконок. Вы можете использовать эту технику с другими элементами вашего сайта, такими как списки, цитаты и кнопки, просто используя классы CSS, предоставляемые  Font Awesome, если это еще не предусмотрено в вашей теме или в одном из конструкторов типа Elementor или Site Origin.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован.