奇怪的下劃線在字體真棒CSS

當我停留在字體真棒的圖標（當他們堆疊在一起時）像下面（見圖片）。我得到這些奇怪的下劃線。有什麼想法他們可以從哪裏來？ enter image description here 奇怪的下劃線在字體真棒CSS

來源：

<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}[email protected]" 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>

來源

2014-02-24 The Internet

不知道爲什麼有人會投下這個無辜的問題。 –

LOL，同意。完全有效的問題。其實幫了我不少。 – FastTrack

這些線路通常來自默認（下劃線）a元素風格。

或者使用其他元素或刪除下劃線：

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

來源

2014-02-24 09:25:41

假設你正在使用a標籤

text-decoration: none;

來源

2014-02-24 09:26:31

也可能需要使用的重要關鍵字在類定義

text-decoration: none !important;

來源

2015-06-02 11:27:32

「text-decoration：none;」需要與設置：在「」標籤「懸停」選擇，像這樣...

a:hover { text-decoration: none; }

來源

2016-07-04 20:18:59 Myles

Fontawesome偉大而有趣的，直到你看到它的行爲。
我通過給每個狀態添加文字修飾來解決這個問題。
如果您不添加:link它會顯示紫色下劃線，很難看，但它在那裏。
如果您不添加:active，點擊時會顯示紅色下劃線，非常明顯。

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

來源

2017-06-21 12:30:43 atilkan

奇怪的下劃線在字體真棒CSS

回答

相關問題