Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

  • By
    RealTime Stock Quotes with MooTools Request.Stocks and YQL

    It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power.  One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP:  Request.Stocks.  Created by Enrique Erne, this great MooTools class acts as...

  • By
    Xbox Live Gamer API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame every n00b I've baptized with my...

Discussion

  1. Eliazer

    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?

    • David Walsh

      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. Stephen Bateman

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

  5. nick

    Stephen you might need to use 

    i[class^="fa"]:before {
  6. Robin

    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!