在 :hover 上更改字体真棒图标

Posted 2023-03-06

【中文标题】在 :hover 上更改字体真棒图标

【英文标题】：Change Font Awesome icon on :hover

【发布时间】：2015-02-24 11:34:50

【问题描述】：

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

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

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

.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】：

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

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

【参考方案3】：

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

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

您需要在悬停时更改 :before 伪元素的 content

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

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

【讨论】：

非常感谢。你的解决方案对我来说看起来更容易。但不幸的是，它不起作用。可能是因为我的.fa-tag 图标在fa-ul、fa-li 和a 标签“内部”？这里的代码：<ul class="fa-ul"> <li><a href="http://wordsinthebucket.com/author/dukemwacha"><i class="fa-li fa fa-tag fa-3x" style="color: #bc1313;"></i></a> 显然我将您的代码添加到 CSS 样式表中。感谢您的帮助。

这快把我逼疯了。字面上地。不为我工作。这是我的控制台：[i.imgur.com/7PX9nyH.png] 我的 css 在这里修改：[i.imgur.com/elUwg3q.png]

好的解决了。正如建议的那样，我的 CSS 没有正确加载。幸运的是，我的主题是它自己的自定义 CSS 代码编辑器，它显然是在 style.css 文件之前加载的。在那里添加代码解决了这个问题。非常感谢。

【参考方案4】：

您可以通过添加 CSS 如下：

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

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

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

【讨论】：

这是应该的。但最好像这样使用它<i class="fa fa-tags change-icon"></i>。并定义.fa.change-icon:hover ... 。

坦率地说，我最喜欢你的方法

非常感谢。你的解决方案对我来说看起来更容易。但不幸的是，它不起作用。可能是因为我的.fa-tag 图标在fa-ul、fa-li 和a 标签“内部”？这里的代码：<ul class="fa-ul"> <li><a href="http://wordsinthebucket.com/author/dukemwacha"><i class="fa-li fa fa-tag fa-3x" style="color: #bc1313;"></i></a> 显然我将您的代码添加到 CSS 样式表中。谢谢你和@dfsq 的帮助。

请参阅codepen.io/ckuijjer/pen/emdKYX 了解工作示例，imgur.com/OOGL759 了解它在 Chrome 的 DevTools 中的外观。也许您的自定义 css 没有正确加载？

这快把我逼疯了。字面上地。不为我工作。这是我的控制台：[i.imgur.com/7PX9nyH.png] 这里我的 css 已修改：[i.imgur.com/elUwg3q.png]