Css 字体中奇怪的下划线

当我将鼠标悬停在font Asome的图标上（当它们堆叠在一起时），如下图所示（见图）。我有这些奇怪的下划线。知道他们从哪里来吗

资料来源：

<div class="text-center">
  <!-- FB -->
  <a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555">
    <i id="facebook" class="fa-3x fa fa-facebook-square"></i>
  </a>
  <!-- Twitter -->
  <a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+@SolidTranslate" target="_blank" style="color : #555">
    <i id="twitter" class="fa-3x fa fa-twitter-square"></i>
  </a>
  <!-- LinkedIn -->
  <a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
    0here:%20${shareURL}&source=${shareURL}"
    target="_blank" style="color : #555">
    <i id="linkedin" class="fa-3x fa fa-linkedin-square"></i>
  </a>
  <!-- Google+ -->
  <a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555">
    <i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>
  </a>
</div>

---

这些行通常来自默认（下划线）

a

元素样式

使用其他元素或删除下划线：

a.social { /* or whatever your class */
   text-decoration: none;
}

---

假设您正在使用

a

标记

text-decoration: none;

---

可能还需要在类定义中使用重要关键字

    text-decoration: none !important;

“文本装饰：无；”需要在“a”标记上设置“：hover”选择器，如下所示

a:hover {
    text-decoration: none;
}

---

真棒棒极了，很有趣。但如果您使用它作为字体，这是预期的行为

向每个状态添加文本装饰。 如果不添加

：link

，它将显示紫色下划线，很难看到，但它在那里。
如果不添加

：active

，则单击时会显示红色下划线，非常可见

a:hover, a:focus, a:active, a:visited, a:link{
    text-decoration: none;
}

---

为所有

fa

类对象上的

悬停

效果删除

文本装饰

：

.fa:hover {
  text-decoration: none;
}

---

不知道为什么有人会否决这个无辜的问题。哈哈，同意了。完全正确的问题。实际上对我帮助很大。目前所有的答案基本上都是一样的，没有一个解释我如何在设置

文本装饰：无时保持容器
a
标记的悬停文本装饰仅在字体图标上。我尝试过各种各样的SCS嵌套，但我还没有找到答案。