Изменить шрифт Удивительный значок на: hover

Надеюсь, этот вопрос еще не задавался в этом форуме. Клянусь, я обыскал его!

Моя цель - изменить значок "тега", когда мышь над ним. А именно, я хочу, чтобы значок "теги" заменил старый.

Я уверен, что там есть легкое решение; возможно, используя

.fa-tag:hover {
 background: url(something);
}

Здесь страница моего сайта с иконками .fa-tag: http://wordsinthebucket.com/about

Заранее благодарю вас за внимание.

Ответ 1

Я бы имел две иконки, но имел только один видимый за раз, переключая их на основе состояния :hover. Я чувствую, что это более гибко, чем возиться с background.

.change-icon > .fa + .fa,
.change-icon:hover > .fa {
  display: none;
}
.change-icon:hover > .fa + .fa {
  display: inherit;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />

<span class="change-icon">
  Tags
  <i class="fa fa-tags"></i>
  <i class="fa fa-gear"></i>
</span>

Ответ 2

Вы можете добавить CSS как:

.fa-tag:hover:before {
  content: "\f02c"
}

который изменяет содержимое псевдоэлемента :before при наведении курсора на .fa-tag.

Я уверен, что не стоит переписывать стиль .fa-tag. По меньшей мере, охват его родительским классом, например. .entry-content .fa-tag:hover:before (хотя я бы предпочел лучшее имя класса, например author-tags.

Ответ 3

.fa-camera-retro:hover:before{
    content: "\f02d";
}

demo - http://www.bootply.com/oj2Io7btD7

вам нужно будет изменить content псевдоэлемента :before при наведении

Вот список полных кодов контента, содержащих шрифты

http://astronautweb.co/snippet/font-awesome/

Ответ 4

Не рекомендуется переписывать fa-tag, поскольку вам может понадобиться его где-то еще в другой области. Я бы сказал: http://antonakoglou.com/change-font-awesome-icon-content-hover/

который на самом деле является второй частью этого ответа, который я только что обнаружил: fooobar.com/info/379409/...