Font Awesome Text-Decoration and Link Underline
If I were to describe Font Awesome in a word, I think it would be...awesome. The icon font library is massively helpful in using quality vector glyphs instead of separate images. I tend to use a lot of icons within links, as they help users to more quickly visually identify navigation. One side effect of using icons within links is that the icons themselves now use the text-decoration of the link. I really don't want icons underlined like the link -- it looks tacky. Here's how I remove them!
The CSS
Using the root icon selector and :before, we can adjust the icon's display and text-decoration:
i[class^="icon-"]:before {
display: inline-block;
text-decoration: none;
}
Needing this snippet to avoid text-decoration is a recent change as Font Awesome originally used the above styles. Keep this CSS code handy if you use Font Awesome!
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Duplicate the jQuery Homepage Tooltips Using MooTools]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Here's how to accomplish this same effect using MooTools.
The XHTML
The above XHTML was taken directly from the jQuery homepage -- no changes.
The CSS
The above CSS has been slightly modified to match the CSS rules already...
![AJAX For Evil: Spyjax with jQuery]()
Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax":
Spyjax, as I know it, is taking information from the user's computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...
Thanks for the snippet, I had the same issue and got to the same solution but was concerned about its performance.
Anything you can say on this matter?
I can’t imagine this causing performance issues…
Performance issues?
p { color: #fff; } – my eight-core cpu is going full-load when renders this!
WHAT A TWIST!
Thanks for the tip. Here’s another similar service that’s amazing as well: http://icomoon.io/
Does this still fix IE10? It’s broken for me. :(
Stephen you might need to use
i[class^="fa"]:before {Ah thanks! That one was driving me nuts. Didn’t think to try
inline-block– i’ll get some more sleep tonight thanks to you :)Thanks, this trick worked for me even in 2020 with Font Awesome 5.