更改字体真棒图标：悬停

I hope this question was not already asked somewhere in this forum. I swear I searched it!

我希望在这个论坛的某个地方没有问过这个问题。我发誓我搜索了它！

My goal is to change the "tag" icon when mouse is over it. Namely, I would like to let the "tags" icon appear replacing the old one.

我的目标是在鼠标悬停时更改“标记”图标。也就是说，我想让“标签”图标替换旧图标。

I am quite sure there is an easy solution out there; probably using

我很确定那里有一个简单的解决方案;可能正在使用

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

Here the page of my website with the .fa-tag icons : http://wordsinthebucket.com/about

这里是我的网站页面，带有.fa-tag图标：http：//wordsinthebucket.com/about

Thank you in advance for your attention.

提前感谢您的关注。

4 个解决方案

#1

I would have two icons but have only one visible at a time, toggling them based on :hover state. I feel this is more flexible then messing with 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

You can by adding CSS like:

您可以通过添加CSS来实现：

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

which changes the content in the :before pseudo element when hovering over the .fa-tag.

当鼠标悬停在.fa-tag上时，会更改：before伪元素中的内容。

I'm quite sure it's not a good idea to overwrite the .fa-tag styling. At least scope it by a parent class, e.g. .entry-content .fa-tag:hover:before (although I would prefer a better class name like author-tags.

我很确定覆盖.fa-tag样式不是一个好主意。至少将其范围限定为父类，例如.entry-content .fa-tag：hover：before（虽然我更喜欢像author-tags这样的更好的类名。

#3

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

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

演示 - http://www.bootply.com/oj2Io7btD7

you will need to change the content of :before pseudo element on hover

你需要在悬停时更改伪元素之前的内容

here is the list of complete fontawesome content codes

这里是完整的fontawesome内容代码列表

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

#4

It's not a good idea to overwrite fa-tag as you might need it somewhere else in a different scope. I would go like this: http://antonakoglou.com/change-font-awesome-icon-content-hover/

覆盖fa-tag并不是一个好主意，因为你可能需要它在不同范围内的其他地方。我会这样：http：//antonakoglou.com/change-font-awesome-icon-content-hover/

which is actually the second part of this answer that I just discovered: https://*.com/a/19503006

这实际上是我刚刚发现的这个答案的第二部分：https：//*.com/a/19503006

#1