Question

我刚刚开始使用FontAwesome，到目前为止一直很好。但是，当我将其与锚标记一起使用并且它具有text-decoration:none时，以及悬停text-decoration:underline时，有一个问题。当我将鼠标悬停在链接上时，图标也会获得下划线效果...我如何只获得带下划线的链接，而不是图标？

我试图将它放在锚标记之外，但它没有得到我分配给链接的颜色

示例代码：

<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中，注意到相机图标本身并没有完全加下划线，但图标和文字之间的空间是。

所以，如果您遇到了什么，只需在图标之后添加一些填充，这样就不会有空格加下划线。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS中的最后一项仅仅是为了显示在悬停时没有发生下划线效果，方法是更改图标的颜色以显示未从其他项目应用格式。请注意，span标记后面没有空格，而是通过应用于.fa类的任何内容的5px填充创建空格。

我在最新版本的Firefox和IE9中都测试了这个，因为这些都是我工作机器上的内容。

Answer 2

我遇到了类似的问题，发现fa类定义了inline-block显示模式。如果我在链接中强制display到inline，那么一切都很好。

a > .fa {
  display: inline;
}

Answer 3

您可以为a:hover span.fa选择器添加样式：

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

  a:hover span.fa {
    text-decoration: none;
  }
</style>

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

Answer 4

将<span>放在<a>之外，以免受悬停影响...

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

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

4 个答案: