奇怪的字体强大的CSS下划线

Question

当我将font-awesome的图标（当它们堆叠在一起时）悬停在下面时（见图片）。我得到了这些奇怪的下划线。知道他们可以来自何处？

来源：

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

Answer 1

这些行通常来自默认（下划线）a元素样式。

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

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

Answer 2

“text-decoration：none;”需要在“a”标签上设置“：hover”选择器，就像这样......

a:hover { text-decoration: none; }

Answer 3

假设您使用的是a代码

text-decoration: none;

Answer 4

Fontawesome 非常有趣。但是如果你将它用作字体，这是预期的行为。

为每个州添加文字装饰。 如果你不添加:link，它将显示紫色下划线，很难看到，但它在那里。
如果您没有添加:active，则点击时会显示红色下划线，非常明显。

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

Answer 5

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

    text-decoration: none !important;