css - 在 :hover 上更改 Font Awesome 图标

Question

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

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

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

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