Как задать цвет иконки в меню?

Подскажите пожалуйста, как задать цвет определенной иконки в меню?

В Хедере сайта, выведен пункт меню:

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

Как сделать так, что изменился цвет иконки (колокольчика)?

Наверное надо что то прописать в Класс CSS, в настройках пункта меню… Вот только что.

Иконка взята с fontawesome.com/ там все одноцветные, нету красных, синих и тд. Так же как нету gif иконок, что бы колокольчик дергаясь привлекал внимание.

ЗЫ. Или на пример сделать что бы на иконке была цифра 1 красная, вот пример:

На примере выше, я пытался сделать html кодом уведомление. Но оно смотрится не очень, не сочетается с шрифтом сайта сам текст Уведомление, и сама иконка (картинка) на мобильных смотрится вполне хорошо, а на ПК появляется размытие картинки. Так что думаю будет лучше и правильней вывести пунктом меню.

Дружище. Именно подучи CSS. Это делается одной строчкой стиля. Все очень просто. Не поленись.

Дружище. Именно подучи CSS. Это делается одной строчкой стиля. Все очень просто. Не поленись.

Никто нигде не пишет: возьми вот это, вставь туда и туда и получится вот так. Пишут кучу кода, практически всегда. И никто не пишет что именно надо брать и куда именно вставлять то. С HTML немного проще, есть код который надо править именно там где он есть, а CSS не понятно от куда что выводится.

Все одно и то же

Никто нигде не пишет: возьми вот это, вставь туда и туда и получится вот так. Пишут кучу кода, практически всегда. И никто не пишет что именно надо брать и куда именно вставлять то.

Вы 5 лет на форуме и всё ищете, кто бы подсказал, куда чего надо вставлять.

Это как за пять лет семейной жизни так и не научиться вставлять самостоятельно.

Вы 5 лет на форуме и всё ищете, кто бы подсказал, куда чего надо вставлять.

Это как за пять лет семейной жизни так и не научиться вставлять самостоятельно.

😊

CSS самый простой код, вы бы действительно хоть попытались бы  понять. есть гугл, яндекс, там по запросу все можно найти. Если у вас иконка svg то нужно добавить стиль  в саму иконку, если пнг то с помощью фотошопа 

Как раз  ccs понятно где выводится и где находится, для этого достаточно открыть консоль в браузере. в отличии от php файлов. 

Никто нигде не пишет: возьми вот это, вставь туда и туда и получится вот так. Пишут кучу кода, практически всегда. И никто не пишет что именно надо брать и куда именно вставлять то. С HTML немного проще, есть код который надо править именно там где он есть, а CSS не понятно от куда что выводится.

Вы 5 лет на форуме и всё ищете, кто бы подсказал, куда чего надо вставлять.

План А: прочитайте это, если после чтения никаких мыслей не будет, то План Б ...  

Мой текст адресован Aliaksandr, а Ris это лучше меня знает.

Подскажите пожалуйста, как задать цвет определенной иконки в меню?

Просто на пальцах, на демо сайте красим конверт, колокольчика там нет: пример красим в красный.

.messages-counter svg {
    color: red;
}

прочитайте это

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

Просто на пальцах

Не все пальцы. А куда вставлять? Я в меню и в виджете попробовал по всовывать, ноль реакции.

А куда вставлять?

Ну для проверки попробуйте вставить в любой виджет «HTML-код» как-то так:

<style>
    .messages-counter svg {
        color: red;
    }
</style>

Работает? Переносим

    .messages-counter svg {
        color: red;
    }

в любой файл стилей, который подключен к вашему шаблону.

 Make, с HTML блоком все получилось. Сразу не получалось именно на иконку уведомления сделать, делалось соотвественно на сообщение. Не мог понять где взять определение самой иконки. В итоге я с демо сайта скопировал себе в Меню, Пункт меню, Общие настройки, Опции, Класс CSS: bell ajax-modal notices-counter и в HTML контейнер вставил себе уже: 

<style>
    .notices-counter svg {
        color: red;
    }
</style>

Если код стоит в HTML контейнере на сайте, тогда работает изменение цвета самой иконки

Когда убираю HTML контейнер с выше описанным кодом на сайте, перехожу Менеджер файлов: /www/домен/templates/modern/css/ Редактировать файл — my.css (этот файл подключен к шаблону)

Вставляю уже проверенный рабочий код:

 .notices-counter svg {
        color: red;
    }

Ничего не изменяется:

Что то не пойму. 

Я удалил HTML контейнер в виджетах на сайте, его не надо удалять? Если все работает через HTML контейнер не изменяя в файлах ничего, обязательно ли изменять в подключенном файле к шаблону? Я там критически не хочу многое добавлять, ибо, зная себя, в итог запутаюсь и буду свновь на форуме повторять темы.

этот файл подключен к шаблону

А точно ли подключен?

А точно ли подключен?

Да. У меня там стоит блокировка вывода надписи, тоесть теперь ее не выводит на сайте — не показывает.

Войдите или зарегистрируйтесь чтобы добавлять комментарии

Вот код в файле my.css

А вот сам файл my.css подключен в файле шаблона main.tpl.php

Я удалил HTML контейнер с кодом цвета в виджетах на сайте, его не надо удалять?

Обновлял страницы соответсвенно, так же как увеличивал абстрактный счётчик в настройках. 

Только что заметил.

На пример. С главной страницы, или со страницы контента иконка не сменила цвет. 

Скриншот с главной страницы

Но если перейти в добавление Объявления, Статьи, Фотоальбома или в профиль пользователя. Иконка сменяет цвет:

Скриншот добавления объявления

 

Примечательно, что если перейти в создание новости или рассписание транспорта ( так же тип контента), иконка не меняет цвет.

 Aliaksandr, Каким виджетом вы выводите «уведомления»?

Не все пальцы. А куда вставлять?

Есть вариант лучше. Сам этим пользуюсь когда не получается определить селектор, очень удобный компонент Инстайлер Pro

 Aliaksandr, Для вас два варианта, так как на сайте два колокольчика 

Красим два колокольчика
#target-uvedomlenie .nav-item svg {
    color: red;
}
 
Красим первый колокольчик
#target-uvedomlenie .bell svg {
    color: red;
}

компонент Инстайлер Pro

Да. Видимо нужно его приобрести как будет возможность.

Каким виджетом вы выводите «уведомления»?

Само уведомление:

пункт в меню

Настройки пункта этого меню

1

А пункт меню выводится в виджетах 

Скриншот

Настройки

Скриншот