css – 更改字体Awesome图标：hover

我希望这个问题在这个论坛没有被问到.我发誓我搜索了！

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

我相当肯定有一个容易的解决方案在那里;可能使用

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

这里的网页与.fa标签图标：http://wordsinthebucket.com/about

提前感谢您的关注.

解决方法

我会有两个图标,但一次只能显示一个图标,可以根据：hover状态切换它们.我觉得这更加灵活,然后搞乱了背景.

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