Geek Answers Handbook

How can I avoid texting on the icons when using a font that is surprising within the link?

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

I tried to place it outside the anchor tag, but it does not get the color assigned to the link

Code example:

 <style> a{color:red;text-decoration:none;} a:hover{text-decoration:underline;} </style> <a href="#"><span class="fa fa-camera-retro"> </span>This a test</a>

thanks

+7
css font-awesome
source share
4 answers

I pulled out your exact code in JSFiddle and noticed that the camera icon itself was not fully allocated, but there was a space between the icon and the text.

So, if this is what you are experiencing, you can just add a few extras after the icon , thus there is no underline for spaces.

 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 element in CSS was simply to show that there was no underline effect on hover by changing the color of the icon to show that formatting is not applied to other elements. Note that there is no space after the span tag, instead, space is created by the 5px add-on, applied to anything with the .fa class.

I tested this both in the latest version of Firefox and in IE9, because this is what is on my working machine.

+4
source share

I had a similar problem, and it turned out that the fa class defines the inline-block display mode. If I linked display with inline inside the link, then everything was fine.

 a > .fa { display: inline; }
+1
source share

You can add a style to the a:hover span.fa :

 <style> a { color: red; text-decoration: none; } a:hover span.fa { text-decoration: none; } </style> <a href="#"><span class="fa fa-camera-retro"></span> This is a test</a>
0
source share

Place your <span> beyond the <a> so that it does not depend on your guidance ...

 <span class="fa fa-camera-retro"></span><a href="#">This is a test</a>
0
source share

More articles:


All Articles