Поиск
Close this search box.
Поиск
Close this search box.

25 января, 2022

Как добавить иконку в пункт меню Elementor. Способ №2. JQuery.

Недавно на страницах нашего блога мы рассмотрели простой способ добавления иконки в пункт меню Elementor, но он не очень красиво выглядит в админке в настройках меню. Чтобы добавить в пункт меню нужный нам значок или картинку, воспользуемся библиотекой JQuery. Этот способ сложнее, но будет выглядеть более профессионально.

Итак, приступим.

Создадим простое меню навигации для примера.

Как добавить иконку в пункт меню Elementor. Способ №2. JQuery.

Вставлять иконку мы будем путем добавления тега <i> с классом fas fa-home из библиотеки иконок Font Awesome, который соответствует векторному изображению «домика».

Как добавить иконку в пункт меню Elementor. Способ №2. JQuery.

Как узнать html-код для этого изображения мы рассмотрели в этой статье.

Вот какой тег мы должны добавить к пункту меню при помощи JQuery:

<i class="fas fa-home">

Добавлять тег мы будем при помощи метода JQuery prepend. Данный метод вставляет элемент перед другим элементом в html-структуре структуре страницы.

kak dobavit ikonku v punkt menyu elementor. sposob №2. jquer 006.

Теперь нам нужно узнать id или class пункта меню, перед которым будем вставлять нашу иконку.

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

kak dobavit ikonku v punkt menyu elementor. sposob №2. jquer 003.
Как добавить иконку в пункт меню Elementor

Смотрим на код нашего пункта меню в структуре документа.

<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>

kak dobavit ikonku v punkt menyu elementor. sposob №2. jquer 005.

Метод prepend вы можете использовать для добавления элементов для любых тегов на странице.

Мы же вставим перед тегом <a> и вот результат:

Почти все. Заметьте, что добавленная иконка сильно прижата к пункту меню и смещена по вертикали. Исправим это при помощи css-кода.

Для этого в виджете навигации зайдем в раздел «Расширенные => Пользовательские css» и пропишем следующий код:

selector a i {
    margin-right: 5px; (внешний отступ справа)
    margin-bottom: 3px; (внешний отступ снизу)
}

Знающие css могут сократить этот код:

selector a i {
   margin: 0 5px 3px 0;
}

Обратите внимание, что классы на вашем сайте могут отличаться от приведенного в наших примерах. Смотрите в инспекторе кода ваши классы.

Уникальные тексты и изображения
с помощью
Искусственного Интеллекта
на русском языке.

Перейдите в Telegram и возьмите бесплатный пакет символов для тестирования сервиса
10 000 символов бесплатно!

0

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

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.