Strange underlines in font-awesome CSS

css hover font-awesome
The Internet picture The Internet · Feb 24, 2014 · Viewed 9.3k times · Source

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

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

Denys S&#233;guret picture Denys Séguret · Feb 24, 2014

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

Related questions

How to Rotate :before pseudo element when parent is hovered

I have added font icons to a list like this: a:before { font-family: FontAwesome; content: "\f015"; .. etc.. } When the parent anchor tag is hovered, I want this :before pseudo to be rotated. I tried this, but it is not working: …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More