CSS 在 :hover 上更改字体真棒图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27669271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Font Awesome icon on :hover
提问by Marco
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.
预先感谢您的关注。
回答by dfsq
I would have two icons but have only one visible at a time, toggling them based on :hoverstate. I feel this is more flexible then messing with background.
我会有两个图标，但一次只有一个可见，根据: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>回答by ckuijjer
You can by adding CSS like:
您可以通过添加 CSS 如下：
.fa-tag:hover:before {
content: "\f02c"
}
which changes the content in the :beforepseudo element when hovering over the .fa-tag.
这改变了所述内容:before悬停在当伪元件.fa-tag。
I'm quite sure it's not a good idea to overwrite the .fa-tagstyling. 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.
回答by Vitorino fernandes
.fa-camera-retro:hover:before{
content: "\f02d";
}
demo - http://www.bootply.com/oj2Io7btD7
演示 - http://www.bootply.com/oj2Io7btD7
you will need to change the contentof :beforepseudo element on hover
你需要改变content的:before伪元素上悬停
here is the list of complete fontawesome content codes
这是完整的 fontawesome 内容代码列表
回答by constanton
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://stackoverflow.com/a/19503006
这实际上是我刚刚发现的这个答案的第二部分：https: //stackoverflow.com/a/19503006
