Как добавить иконку в пункт меню Elementor. Способ №2. JQuery.
Недавно на страницах нашего блога мы рассмотрели простой способ добавления иконки в пункт меню Elementor, но он не очень красиво выглядит в админке в настройках меню. Чтобы добавить в пункт меню нужный нам значок или картинку, воспользуемся библиотекой JQuery. Этот способ сложнее, но будет выглядеть более профессионально.
Итак, приступим.
Создадим простое меню навигации для примера.
Вставлять иконку мы будем путем добавления тега <i> с классом fas fa-home из библиотеки иконок Font Awesome, который соответствует векторному изображению “домика”.
Как узнать html-код для этого изображения мы рассмотрели в этой статье.
Вот какой тег мы должны добавить к пункту меню при помощи JQuery:
<i class="fas fa-home">
Добавлять тег мы будем при помощи метода JQuery prepend. Данный метод вставляет элемент перед другим элементом в html-структуре структуре страницы.
Теперь нам нужно узнать id или class пункта меню, перед которым будем вставлять нашу иконку.
Для этого открываем консоль разработчика в браузере, нажав на клавишу F12. Включаем подсветку элементов и наводим курсор на наш пункт меню. Выберем первый пункт для примера.
Смотрим на код нашего пункта меню в структуре документа.
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1951">
<a href="#yakor01" class="elementor-item elementor-item-anchor menu-link">Блок 1</a>
</li>
Как видно на изображении, каждый пункт меню с тегом <li> содержит много классов, но они все идентичные, кроме последнего ( menu-item-*). Вот он то нам и нужен, так как он уникален и, следовательно, JQuery добавит тег именно перед нужным нам элементом.
Класс первого пункта меню следующий:
menu-item-1951 (у вас он может быть совсем другой)
Далее добавим html-виджет на страницу редактирования, для вставки скрипта и вставляем следующий код:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function (){
$('.menu-item-1951 a').prepend('<i class="fas fa-home">');
});
</script>
Прокомментируем код.
Мы создали функцию, которая добавляет к элементу с классом .menu-item-1951 при помощи метода prepend html-элемент <i class=”fas fa-home”>. Внимательные заметят, что после класса мы поставили еще и тег <a>, который является вложенным элементом тега <li> и представляет из себя ссылку на пункт меню. Это необходимо, чтобы элемент <i class=”fas fa-home”> добавился не перед тегом пункта меню, а перед ссылкой этого пункта.
Вот что будет, если добавить иконку перед тегом <li>, а не перед его дочерним тегом <a>
Метод prepend вы можете использовать для добавления элементов для любых тегов на странице.
Мы же вставим перед тегом <a> и вот результат:
Почти все. Заметьте, что добавленная иконка сильно прижата к пункту меню и смещена по вертикали. Исправим это при помощи css-кода.
Для этого в виджете навигации зайдем в раздел “Расширенные => Пользовательские css” и пропишем следующий код:
selector a i {
margin-right: 5px; (внешний отступ справа)
margin-bottom: 3px; (внешний отступ снизу)
}
Знающие css могут сократить этот код:
selector a i {
margin: 0 5px 3px 0;
}
Обратите внимание, что классы на вашем сайте могут отличаться от приведенного в наших примерах. Смотрите в инспекторе кода ваши классы.
0