Strange underlines in font-awesome CSS

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

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

a:hover {
    text-decoration: none;
}