Добавление иконок в меню навигации вашего сайта может быть необходимо вам по дизайну макета или по вашему собственному желанию, т.к. иконки дают вашим посетителям некоторые визуальные подсказки о содержании страниц и могут быть потом оставлены в мобильном меню без текста пунктов меню.
В этой статье мы разберем, как это можно сделать без использования плагинов или загрузки изображений. Вместо этого вы внесете некоторые изменения в меню навигации через админку WordPress, а затем добавите код в файл темы.
В результате вы получите простое меню с иконками из набора Font Awesome:
Последовательность добавления иконок в меню
Вот те шаги, которые вам нужно сделать для добавления иконок в меню:
- Создайте дочернюю тему, если используете одну из тех, которые будут обновляться, либо воспользуйтесь файлом functions.php, если работаете со своей собственной темой.
- Добавьте код загрузки библиотеки Font Awesome в файла функций вашей темы, используя функцию
wp_enqueue_style()
илиwp_enqueue_scripts()
. - Добавьте CSS-классы к элементам в меню навигации через админку WordPress.
- Добавьте стили для пунктов меню в файл 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.
Мы будем использовать загрузку css-файла с библиотекой Font Awesome по ссылке на CDN. Для этого создайте новый файл с именем functions.php в папке вашей темы, если еще этого не сделали. Если в вашей дочерней/основной теме уже есть файл функций, откройте его и добавьте в него этот код и сохраните файл:
1 2 3 4 5 | function blossom_child_theme_scripts() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style ('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css','', '5.15.4'); } add_action( 'wp_enqueue_scripts', 'blossom_child_theme_scripts' ); |
Учтите, что в случае использования дочерней темы, активна на сайте должна быть именно она.
Проверить, что файл с fontawesome.css подключился, можно нажать CTRL + U
или выбрать Просмотр кода в контекстном меню при клике на любой странице сайта. Затем нажмите CTRL + F
(поиск) и введите font-awesome или часть этого слова:
В том случае, когда вы увидите подключение стилей, можно двигаться дальше.
Шаг 3. Добавление классов к пунктам меню
После добавления css-стилей Font Awesome мы можем использовать классы CSS, которые он предоставляет, для добавления иконок к пунктам меню.
В админке WordPress перейдите в Внешний вид → Меню, чтобы вы могли редактировать меню навигации. Если вы еще не создали ни одного меню, создайте его сейчас, добавив нужные страницы, и убедитесь, что вы установили флажок «Основная навигация» для области отображения в нижней части блока настроек меню.
WordPress позволяет вам добавить класс CSS к каждому элементу вашего меню, но вы не можете видеть это поле по умолчанию. Для этого вам нужно сначала включить его:
- Вверху экрана щелкните вкладку Настройки экрана.
- Убедитесь, что установлен флажок «Классы CSS».
- Закройте вкладку «Настройки экрана».
Теперь вы можете добавить класс к каждому пункту меню. Начните с главной страницы. Рядом с пунктом меню щелкните стрелку вниз, чтобы просмотреть дополнительные параметры, относящиеся к этому пункту меню. В поле «Классы CSS» введите fas fa-lg fa-home
.
Внешний вид этого окна может также отличаться для разных тем, т.к. добавление настроек зависит от кода темы.
Здесь вы видите 3 класса из набора Font Аwesome:
fas
илиfar
для указания, какой набор иконок Font Awesome используется (solid, regular)fa-lg
для указания увеличенного размера иконокfa-home
как определенная иконка для определенной страницы.
Например, вы можете указать такие классы для страниц:
- О нас:
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 дочерней темы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #mega-menu-wrap { padding-top: 40px; } #mega-menu-wrap li { padding-left: 30px; } #mega-menu-wrap > ul > li > a { padding: 0px 6px; } .menu .fa-lg::before { width: 30px; position: absolute; left: 11px; } |
Теперь внешний вид уже лучше:
На данный момент мы проделали все шаги и закончили меню с иконками.
Резюме
Добавление иконок с помощью библиотеки Font Awesome на ваш сайт - это достаточно простой процесс за счет уже созданных в ней классов для встраивания определенных иконок. Вы можете использовать эту технику с другими элементами вашего сайта, такими как списки, цитаты и кнопки, просто используя классы CSS, предоставляемые Font Awesome, если это еще не предусмотрено в вашей теме или в одном из конструкторов типа Elementor или Site Origin.