html - HTML/CSS 图标作为字体使用 - 悬停改变颜色

Question

我正在考虑开始使用这种图标技术作为字体，因为它看起来非常棒。但我似乎无法弄清楚如何让它在链接悬停时改变颜色。这是一个供您使用的jsfiddle：

http://jsfiddle.net/eNhUf/17/

正如您将看到的，当您将“警告”之类的文本悬停时，文本变为蓝色，我也希望图标/字体也变为蓝色。

有人知道怎么做这个吗？

谢谢。

Answer 1

.caution.icon:hover:before{content:"\0021";color:green }

当您悬停链接时，这将使警告图标变为绿色，我相信您可以根据需要自定义想法！http://jsfiddle.net/agentmilindu/eNhUf/24/

Answer 2

字体图标库通常使用预先生成的内容将图标注入到元素中。这意味着您需要定位该区域并设置颜色。

<p class="icon caution email">Email</p>
<style type="text/css">
   .icon.caution, .icon.caution:before { color:blue; }
</style>

Answer 3

试试这个：

.icon:hover, .icon:hover:before { color: blue; }