Поддержка Проблемы и решения Как задать цвет и название иконки?

  • Заменил на сайте в хедере иконку Flickr на загруженную на сайт свою в ряду коллекции Font Awesome. То же самое сделал и в футере. Только там цвет наведения на месте, а в хедере никак не получается его присвоить. Также интересует как сменить отображаемое при наведении название данной иконки.
    5f046b2335fb7488451049

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 1 по 15 (всего 18)
  • спасибо за ответы! оперативно и по делу!

    Добрый день. Ваша «иконка» 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=»Киев», и при наведении будет показываться слово Киев
    И всё
    Немножко отредактировать код

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

    Заходите к нам еще, всегда рады помочь -)))

    Rupor, привет.

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

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

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

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

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

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

    @vladvector, добрый вечер. А как это отображается, если её не видно? Да я понимаю, что с :hover надо, но сам код с этим свойством слепить не получается. Иконки выводятся посредством Font Awesome. Просто иконки сервиса Coub там до сих пор нет, вот и приходится велосипед изобретать

    • Ответ изменён 2 месяца, 2 недели назад пользователем 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 реализовать

    что для этого нужно прописать?

    спрайтом

    а это как?

    Вопрос не решён! Измените статус. Он будет решён тогда, когда все вопросы по нему будут реально решены!

    Модератор Yui

    (@fierevere)

    ゆい

    Измените статус

    вы и сами можете это сделать.

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

    @virusook, наверно вы правы. Только какие коды должны быть, чтоб реализовать эту задумку?

Просмотр 15 ответов — с 1 по 15 (всего 18)