Font Awesome Text-Decoration and Link Underline

By  on  

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!

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

Discussion

  1. 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…

  2. Mircea

    Performance issues?

    p { color: #fff; } – my eight-core cpu is going full-load when renders this!

    WHAT A TWIST!

  3. Brandon

    Thanks for the tip. Here’s another similar service that’s amazing as well: http://icomoon.io/

  4. Does this still fix IE10? It’s broken for me. :(

  5. Stephen you might need to use

    i[class^="fa"]:before {
  6. 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 :)

  7. nonsaprei

    Thanks, this trick worked for me even in 2020 with Font Awesome 5.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!