Question

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

我的目标是更改＆＃34;标记＆＃34;鼠标悬停在它上面的图标。也就是说，我想让＃34;标签＆＃34;图标显示替换旧图标。

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

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

这是我网站上的.fa-tag图标页面：http://wordsinthebucket.com/about

提前感谢您的关注。

Answer 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>

Answer 2

您可以添加CSS，如：

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

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

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

Answer 3

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

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

您需要在悬停

上更改content :before个伪元素

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

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

Answer 4

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

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

更改字体真棒图标：悬停

4 个答案: