Strange underlines in font-awesome CSS

Question

When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?

Source:

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

Answer 1

Those lines usually come from the default (underline) a element style.

Either use another element or remove the underline :

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