How can I avoid text-decoration on icons when using font-awesome within a link?

Question

I've just started using FontAwesome, so far so good. One question though, when I use it with an anchor tag and it has text-decoration:none, and on hover text-decoration:underline. When I hover the link, the icon gets the underline effect, too…how do I get only the link to be underlined, not the icon?

I tried to placing it outside the anchor tag, but it doesn't get the color I assigned to the link

Sample code:

<style>
  a{color:red;text-decoration:none;}
  a:hover{text-decoration:underline;}
</style>

<a href="#"><span class="fa fa-camera-retro"> </span>This's a test</a>

Thank you

Answer 1

I popped your exact code into JSFiddle and noticed that the camera icon itself wasn't being underlined completely, but the space between the icon and the text was.

So, if that's what you're experiencing, you can simply add a bit of padding after the icon, that way there's no whitespace to underline.

a {
  color: red;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.fa {
  padding-right: 5px;
}
a:hover .fa {
  color: blue;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#"><span class="fa fa-camera-retro"></span>This is a test</a>

The last item in the CSS was merely to show that no underline effect was happening on hover by changing the icon's color to show formatting wasn't being applied from other items. Notice there's no space after the span tag, instead the space is created by the 5px padding applied to anything with the .fa class.

I tested this in both a very recent version of Firefox, and IE9 because those are what's on my work machine.