The Internet The Internet - 1 year ago 78
CSS Question

Strange underlines in font-awesome CSS

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?enter image description here


<div class="text-center">
<!-- FB -->
<a href="${shareURL}"
target="_blank" style="color : #555">
<i id="facebook" class="fa-3x fa fa-facebook-square"></i>
<!-- Twitter -->
<a href="!:+${shareURL}+@SolidTranslate" target="_blank" style="color : #555">
<i id="twitter" class="fa-3x fa fa-twitter-square"></i>
<!-- LinkedIn -->
<a href="${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>
<!-- Google+ -->
<a href="${shareURL}"
style="color : #555">
<i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>

Answer Source

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

Either use another element or remove the underline : { /* or whatever your class */
   text-decoration: none;