Привет, друзья! В данное статье рассмотрим решение частого вопроса, как добавить иконку в пункт меню Elementor.
Для начала рассмотрим добавление иконки в пункт меню WordPress из стандартного пакета иконок Fontawesome 5, который Elementor поддерживает по умолчанию.
И так, для начала напомним Вам, что Elementor использует для отображения меню навигации стандартное меню WordPress (как добавить меню читайте в этой статье). Давайте направимся в консоль сайта в раздел Внешний вид => Меню.
Далее выбирайте нужное меню из списка, если их у вас несколько.
Я создал тестовое меню, в пункты которого мы будем добавлять иконки.
Иконка в коде страницы
Для лучшего понимания дальнейших манипуляций, давайте разберемся, что из себя представляет иконка непосредственно в коде страницы. Откроем консоль разработчика в браузере, нажав клавишу F12. В моем случае это Chrome, у вас может быть другой браузер. Консоль везде открывается одинаково. Открыв любую страницу, на которой есть иконка, подсветим ее, и посмотрим ее html-код.
Подсветим нашу иконку.
//Код изображения иконки-звездочки из набора Fontawesome 5
<i aria-hidden="true" class="fas fa-star"></i>Из примера кода выше можно сделать вывод, что иконка добавляется к html-тегу <i> путем присваивания ему css-класса class=»fas fa-star».
Далее зайдем на сайт fontawesome.com и посмотрим на бесплатные наборы иконок, которые включены в Elementor.
Выберем любую иконку, для примера.
Обратите внимание на код, расположенный над иконкой, я его подсветил на изображении выше.
Теперь вы должны догадаться, что для того, чтобы добавить иконку на страницу, нужно присвоить элементу <i> css-класс class=»fab fa-accusoft»
Как это сделать, применимо к пункту меню WordPress.
Вернемся в панель управления WordPress в раздел в раздел Внешний вид => Меню.
Развернем любой пункт меню.
Теперь добавим нужную Вам иконку в пункт меню. Так как я для примера выбрал первый пункт, пусть это будет значок домашней страницы.
Посмотрим его код на сайте fontawesome.com
Код нашей иконки <i class=»fas fa-home»></i>
Вставим этот код перед названием пункта меню.
Обновим страницу и увидим следующую картину.
Видно, что иконка стала перед пунктом меню, но она прилипла к нему слева. Если добавить пробел, то значок все равно будет прилипать к пункту меню. Решается эта проблема добавлением html-символа пробела после тега <i>
Таким образом для каждого пункта меню можно добавить различные иконки.
Данное решение для кого-то может показаться «колхозом» и внутри выглядит не очень, но оно рабочее и имеет право на жизнь. В дальнейшем я обязательно расскажу Вам, как добавить иконку в пункт меню более элегантно при помощи js-библиотеки JQuery.
У меня все. Спасибо за внимание! Не забывайте ставить лайк статье, если она Вам помогла.
0