Как добавить иконку в пункт меню стандартного блока

Если вам очень нужно добавить иконку к пункту меню и очень не хочется из-за этого прибегать к зеро блоку, то выход есть!

Давайте на примере стандартного блока МЕ301 добавим иконку городу, чтобы визуально выделить его среди остальных пунктов меню

1. Добавляем стандартный блок меню и заполняем пункты

2. Далее нам нужно добавить иконку и получить ссылку на нее.

Для этого добавляем блок IM01 и загружаем в него нашу иконку. Далее опубликовываем страницу и нажимаем правой кнопкой мыши на изображение, далее на “Открыть изображение в новой вкладке” и копируем ссылку на изображение.

После этого изображение нужно скрыть в Тильде, чтобы оно не отображалось на странице

3. После заходим в панель разработчика, чтобы вытащить класс нужного нам пункта.

Нажимаем правой кнопкой мыши на пункт меню и выбираем пункт “Посмотреть код”

4. Здесь в панели разработчика (справа) нам нужен class элемента навигация nav. В данном случае это t228__centercontainer. Копируем его и вставляем в код, который будет в инструкции далее

5. Копируем код и вставляем в блок Т123

А сейчас подробнее про каждый пункт

.t228__centercontainer li:nth-child(7)::before

.t228__centercontainer — класс навигации (пункт 4)
li:nth-child(7) — 7 это номер пункта в меню. Посчитайте какой по счету ваш пункт меню и впишите в скобки
::before — это если нам надо, чтобы иконка была перед пунктом меню. Если нужно, чтобы иконка была после, то меняем на ::after

background-image: url("https://static.tildacdn.com/tild3033-6430-4461-b032-643334333463/nrk_geopoint.svg");

В кавычки вставляем ссылку на иконку (пункт 2)

width: 16px; и height: 16px;

Это ширина и высота иконки
Если нужно, чтобы высота иконки в мобильной версии была другой, то дополнительно вставляем код:

@media screen and (max-width: 960px) { .t228__centercontainer li:nth-child(7)::before { width: 20px; height: 20px; } }

max-width: 960px — значит, что на экранах до 960px будут другие размеры иконки

Если нужно ограничить разрешение с двух сторон, то пишем:

@media screen and (min-width: 480px) and (max-width: 960px) { .t228__centercontainer li:nth-child(7)::before { width: 20px; height: 20px; } }

Как будет выглядеть весь код:

6. После опубликовываем и любуемся результатом =)

Если было полезно — ставь лайк и сохраняй

Еще больше полезного контента в моем телеграм канале