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!
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Fullscreen API]()
As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...
![Save Web Form Content Using Control + S]()
We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...
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.