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!
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![Dijit’s TabContainer Layout: Easy Tabbed Content]()
One of Dojo's major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very useful layout class is the TabContainer. TabContainer allows you to quickly create a tabbed content...
![Fade Images with MooTools LazyLoad]()
I recently received an email from a MooTools developer asking a great question about my LazyLoad class:
"I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...
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.