Как задать цвет и название иконки?
-
Заменил на сайте в хедере иконку Flickr на загруженную на сайт свою в ряду коллекции Font Awesome. То же самое сделал и в футере. Только там цвет наведения на месте, а в хедере никак не получается его присвоить. Также интересует как сменить отображаемое при наведении название данной иконки.
Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
-
спасибо за ответы! оперативно и по делу!
Добрый день. Ваша «иконка» 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=»Киев», и при наведении будет показываться слово Киев
И всё
Немножко отредактировать код-
Ответ изменён 4 года, 7 месяцев назад пользователем
VseProIgru.
Заходите к нам еще, всегда рады помочь -)))
Rupor, привет.
Заменил на сайте в хедере иконку Flickr
Вы её перекрыли, оригинальня также отображается, теперь и со смещением.
Только там цвет наведения на месте, а в хедере никак не получается его присвоить.
В «подвале» вы костыль сделали, если хотите более-менее симпатично сделать в «шапке», то задавайте
:hover
и бэкграундом указывайте тот же логотип, только другого цвета (синий, к примеру).Также интересует как сменить отображаемое при наведении название данной иконки.
Сильно зависит от того, чем вообще выводятся эти иконки.
@vladvector, добрый вечер. А как это отображается, если её не видно? Да я понимаю, что с :hover надо, но сам код с этим свойством слепить не получается. Иконки выводятся посредством Font Awesome. Просто иконки сервиса Coub там до сих пор нет, вот и приходится велосипед изобретать
-
Ответ изменён 4 года, 7 месяцев назад пользователем
Rupor.
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, так вы хотите же эффект наведения сделать, чтобы цвет менялся, нет? У вас остальные иконки оранжевые при наведении, вот я и предположил, что вы хотите всё в одном решении сделать.
Так-то не принципиально, делайте как захотите.
@vladvector, ок, попробую. Так что сделать, чтоб в коде старого варианта тоже не было и чтоб опять-таки при наведении всплывало название Coub, а не Flickr?
Rupor, самое простое, но не лучшее решение — это скрыть старую иконку через
display: none;
, а описание можно костылём через JS реализовать.Но в итоге, как видите, проще было бы свои иконки спрайтом сделать, а про FA забыть в данном случае.
@vladvector,
описание можно костылём через JS реализовать
что для этого нужно прописать?
спрайтом
а это как?
Вопрос не решён! Измените статус. Он будет решён тогда, когда все вопросы по нему будут реально решены!
Измените статус
вы и сами можете это сделать.
Исследовал Ваш код. В шапке у Вас стоит SVG элемент. Картинка, которая должна заливаться, с помощью fill: color; Но она не заливается. Обычно svg элементы вставляются в html, а не в css.
В футере у вас стоит png картинка обычная.
Видя всю ситуацию вашу, я бы сделал элементарно. взял из футера картинку, сделал одну черную, и вторую оранжевую, которая будет использоваться, как hover. Бред — да. Но раньше только так все и делали, когда не было fontawesome, svg и других сервисов. работать будет точно.@virusook, наверно вы правы. Только какие коды должны быть, чтоб реализовать эту задумку?
-
Ответ изменён 4 года, 7 месяцев назад пользователем
- Тема «Как задать цвет и название иконки?» закрыта для новых ответов.