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!
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Google Extension Effect with CSS or jQuery or MooTools JavaScript]()
Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...
![JavaScript Copy to Clipboard]()
"Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...
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.