12 ноября, 2021

Как добавить иконку в пункт меню Elementor. Простой способ

Привет, друзья! В данное статье рассмотрим решение частого вопроса, как добавить иконку в пункт меню Elementor.

Добавляем иконку в пункт меню Elementor.

Для начала рассмотрим добавление иконки в пункт меню WordPress из стандартного пакета иконок Fontawesome 5, который Elementor поддерживает по умолчанию.

И так, для начала напомним Вам, что Elementor использует для отображения меню навигации стандартное меню WordPress (как добавить меню читайте в этой статье). Давайте направимся в консоль сайта в раздел Внешний вид => Меню.

sozdaem menyu vordpress 001

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

kak dobavit ikonku v menyu elementor. prostoj sposob 001

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

Иконка в коде страницы

Для лучшего понимания дальнейших манипуляций, давайте разберемся, что из себя представляет иконка непосредственно в коде страницы. Откроем консоль разработчика в браузере, нажав клавишу F12. В моем случае это Chrome, у вас может быть другой браузер. Консоль везде открывается одинаково. Открыв любую страницу, на которой есть иконка, подсветим ее, и посмотрим ее html-код.

kak dobavit ikonku v menyu elementor. prostoj sposob 002

Подсветим нашу иконку.

kak dobavit ikonku v menyu elementor. prostoj sposob 003
//Код изображения иконки-звездочки из набора Fontawesome 5


<i aria-hidden="true" class="fas fa-star"></i>

Из примера кода выше можно сделать вывод, что иконка добавляется к html-тегу <i> путем присваивания ему css-класса class=»fas fa-star».

Далее зайдем на сайт fontawesome.com и посмотрим на бесплатные наборы иконок, которые включены в Elementor.

kak dobavit ikonku v menyu elementor. prostoj sposob 004

Выберем любую иконку, для примера.

kak dobavit ikonku v menyu elementor. prostoj sposob 005

Обратите внимание на код, расположенный над иконкой, я его подсветил на изображении выше.

Теперь вы должны догадаться, что для того, чтобы добавить иконку на страницу, нужно присвоить элементу <i> css-класс class=»fab fa-accusoft»

Как это сделать, применимо к пункту меню WordPress.

Добавим иконку в пункт меню Elementor

Вернемся в панель управления WordPress в раздел в раздел Внешний вид => Меню.

Развернем любой пункт меню.

kak dobavit ikonku v menyu elementor. prostoj sposob 006

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

Посмотрим его код на сайте fontawesome.com

kak dobavit ikonku v menyu elementor. prostoj sposob 007

Код нашей иконки <i class=»fas fa-home»></i>

Вставим этот код перед названием пункта меню.

kak dobavit ikonku v menyu elementor. prostoj sposob 008

Обновим страницу и увидим следующую картину.

kak dobavit ikonku v menyu elementor. prostoj sposob 009

Видно, что иконка стала перед пунктом меню, но она прилипла к нему слева. Если добавить пробел, то значок все равно будет прилипать к пункту меню. Решается эта проблема добавлением html-символа пробела &nbsp; после тега <i>

kak dobavit ikonku v menyu elementor. prostoj sposob 010
Обновим страницу.

Таким образом для каждого пункта меню можно добавить различные иконки.

Данное решение для кого-то может показаться «колхозом» и внутри выглядит не очень, но оно рабочее и имеет право на жизнь. В дальнейшем я обязательно расскажу Вам, как добавить иконку в пункт меню более элегантно при помощи js-библиотеки JQuery.

У меня все. Спасибо за внимание! Не забывайте ставить лайк статье, если она Вам помогла.

0

Разбор какой темы Вы хотели бы видеть на нашем сайте?

Интересные статьи

Оставьте комментарий

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.