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

Добрый день. Ваша «иконка» Flickr, на самом деле обычная Png картинка https://prnt.sc/temsou. До этого была вот эта иконка https://prnt.sc/temtx1. Есть много разных способов чтобы при наведении менялся цвет, но просто заменить картинку нельзя. Самый простой способ Вашу картинку https://rodnik.top/wp-content/uploads/2020/07/coub6.png, сделать в оранжевом цвете. И сделать код чтобы при наведении менялась картинка. (http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee)
В футере там тоже не меняется цвет самой картинки. Там меняется background (скорее всего это background предыдущий картинки).

И я так понял это иконки самой темы. По другому сделать немного сложнее.
Ещё можно через настройки темы убрать эти иконки и скачать какой то прикольный плагин с ними.

Текст при наведении в хедере берётся с этой же иконки https://prnt.sc/temtx1. На счёт текста прям всё очень просто. Вам просто надо поменять название в title=»» https://prnt.sc/tenkbm
Именно
https://prnt.sc/tenmn4
Меняете title=»Flickr» допустим на title=»Киев», и при наведении будет показываться слово Киев
И всё
Немножко отредактировать код

• Ответ изменён 3 года, 9 месяцев назад пользователем VseProIgru.

Rupor, привет.

Заменил на сайте в хедере иконку Flickr

Вы её перекрыли, оригинальня также отображается, теперь и со смещением.

Только там цвет наведения на месте, а в хедере никак не получается его присвоить.

В «подвале» вы костыль сделали, если хотите более-менее симпатично сделать в «шапке», то задавайте :hover и бэкграундом указывайте тот же логотип, только другого цвета (синий, к примеру).

Также интересует как сменить отображаемое при наведении название данной иконки.

Сильно зависит от того, чем вообще выводятся эти иконки.

Rupor,

А как это отображается, если её не видно?

Я код смотрел. Ну и сам факт того, что старая иконка на месте — не есть хорошо. У вас эти иконки в теме зашиты или отдельно как подключали?

Просто иконки сервиса Coub там до сих пор нет, вот и приходится велосипед изобретать

Её уже 7 лет как не могут добавить)

понимаю, что с :hover надо, но сам код с этим свойством слепить не получается

В чём загвоздка?

Попробуйте так (добавить в дополнительные стили в настройках темы):

.topbar__social-media .socail_media__flickr:hover {
    content: url("https://rodnik.top/wp-content/uploads/2020/07/coub-hover.png") !important;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

https://rodnik.top/wp-content/uploads/2020/07/coub-hover.png — новая картинка в оранжевом цвете;

width: 20px; и height: 20px; — этот размер иконки соответствует размеру других иконок.

Rupor, так вы хотите же эффект наведения сделать, чтобы цвет менялся, нет? У вас остальные иконки оранжевые при наведении, вот я и предположил, что вы хотите всё в одном решении сделать.

Так-то не принципиально, делайте как захотите.

Rupor, самое простое, но не лучшее решение — это скрыть старую иконку через display: none;, а описание можно костылём через JS реализовать.

Но в итоге, как видите, проще было бы свои иконки спрайтом сделать, а про FA забыть в данном случае.

Исследовал Ваш код. В шапке у Вас стоит SVG элемент. Картинка, которая должна заливаться, с помощью fill: color; Но она не заливается. Обычно svg элементы вставляются в html, а не в css.
В футере у вас стоит png картинка обычная.
Видя всю ситуацию вашу, я бы сделал элементарно. взял из футера картинку, сделал одну черную, и вторую оранжевую, которая будет использоваться, как hover. Бред — да. Но раньше только так все и делали, когда не было fontawesome, svg и других сервисов. работать будет точно.