css - 在链接中使用 font-awesome 时，如何避免图标上的文本装饰？

Question

我刚刚开始使用 FontAwesome，到目前为止一切顺利。但有一个问题，当我将它与 anchor 标记一起使用时，它有 text-decoration:none，悬停时 text-decoration:underline。当我将鼠标悬停在链接上时，图标也会有下划线效果……我如何才能只给链接加下划线，而不给图标加下划线？

我试着把它放在 anchor 标签外面，但它没有得到我分配给链接的颜色

示例代码:

<style>
  a{color:red;text-decoration:none;}
  a:hover{text-decoration:underline;}
</style>

<a href="#"><span class="fa fa-camera-retro"> </span>This's a test</a>

谢谢

Answer 1

我将您的确切代码弹出到 JSFiddle 中，发现相机图标本身并没有完全加下划线，但图标和文本之间的空格加了下划线。

因此，如果这是您遇到的情况，您可以简单地在图标后添加一些填充，这样就没有空格可以加下划线。

a {
  color: red;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.fa {
  padding-right: 5px;
}
a:hover .fa {
  color: blue;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#"><span class="fa fa-camera-retro"></span>This is a test</a>

CSS 中的最后一项只是通过更改图标的颜色来显示悬停时没有下划线效果，以显示其他元素未应用格式。请注意，span 标记后没有空格，而是由应用于 .fa 类的任何内容的 5px 填充创建的空格。

我在最新版本的 Firefox 和 IE9 中对此进行了测试，因为我的工作机器上有这些。