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!
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![MooTools Zebra Tables Plugin]()
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.
The CSS
The above CSS is extremely basic.
![MooTools Window Object Dumping]()
Ever want to see all of the information stored within the window property of your browser? Here's your chance.
The XHTML
We need a wrapper DIV that we'll consider a console.
The CSS
I like making this look like a command-line console.
The MooTools JavaScript
Depending on what you have loaded...
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.