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?

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

Answer 2

It may also be necessary to use the important keyword in your class definition

    text-decoration: none !important;

Answer 3

Fontawesome great and fun. But if you are using it as font, this is expected behaviour.

Add text-decoration to every state. If you don't add :link it will show purple underline, very hard to see but it is there.
If you don't add :active it will show red underline when clicking, very visible.

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

Answer 4

Assuming you are using a tags

text-decoration: none;

Answer 5

"text-decoration: none;" needs to be set with the ":hover" selector on the "a" tag, like this...

a:hover {
    text-decoration: none;
}

Answer 6

Remove text-decoration for hover effect on all fa class objects:

.fa:hover {
  text-decoration: none;
}