Using Font Awesome Icons without <i> Tags

By  on  

If you've not used glyph icon libraries like Font Awesome before, you're really missing out.  They're incredibly useful, flexible, and are easy to implement via markup.  The normal method for using font awesome is by using an <i> element with an icon-specific CSS class:

<i class="icon-github"></i>

This works beautifully in most cases but what if you don't want to inject an <i> tag or simply can't?  If you run into this case, you can still use Font Awesome glyphs!  All you need to do is use the :before pseudo-element of the element you want to use and set its content and font-family:

div.github:before {
	content: "\f09b";
	font-family: FontAwesome;

	/* more styling for the icon, including color, font-size, positioning, etc. */
}

This is essentially what Font Awesome does for <i> tags so it's only natural that we do so for our custom purpose.  To find the content string for the icon you'd like, just open the font-awesome.css and look up the icon you'd like to use!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...

  • By
    Smooth Scrolling with MooTools Fx.SmoothScroll

    I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll. The HTML The only HTML requirement for Fx.SmoothScroll is that all named...

Discussion

  1. Awesome tip !
    Thank you !

  2. Branden

    In my experience with Font Awesome, you don’t have to use .
    You can add the icon class to a and it works just the same.

    You can also still put contents within the div like so:

    Fork me

    This will display the icon with the text inline to the right.

    Note: I haven’t really checked to see how IE7 handles this, but my guess is that the contents gets replaced by the icon.

  3. Branden

    Sorry…HTML was still stripped…Lets try that again…

    In my experience with Font Awesome, you don’t have to use /**/.
    You can add the icon class to a /**/ and it works just the same.

    /**/

    You can also still put contents within the div like so:

    /*Fork me*/

    This will display the icon with the text inline to the right.

    Note: I haven’t really checked to see how IE7 handles this, but my guess is that the contents gets replaced by the icon.

  4. i was looking on this idea, thank you :)

  5. Mickey

    And when they change the char codes, in… say… version 4?

    • Joe

      If they ever change the char codes then you should not use them at all

  6. You don’t need to use an tag. I’ve been doing for a very long time, even with the latest 3.2.1 code. Even look at the source, there is no specificity.

    http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

    • Well it removed my markup. But you can simply use (span tag) or any other element.

  7. Dimitri

    input:before doesnt work.

    • Dimitri

      Never mind – “:before and :after render inside a container” so form elements are not possible :/

  8. accessibility

    By using an i tag though, you can at least assign an “aria-hidden” attribute to what’s really just a decorative element. Applying the icon to an element with real content will cause screen-readers to pronounce the pseudo-element’s content which you likely want to avoid. See related – https://github.com/FortAwesome/Font-Awesome/issues/389

  9. http://fontawesome.io/whats-new/ — a major new version of FontAwesome was just released yesterday. Still awesome, but the classes have all changed. Correct syntax is now:

    • <i class=”fa fa-github”><i>

  10. Luccas Maso

    Like Mickey said, this is not a good practice. The chars order could change in future versions and all breaks down to refactor. I’m trying to find a solution for this but still nothing…

  11. Luccas Maso

    Found a good solution using a mixin with sass

    @mixin icon-pseudo($name) {
    font-family: “your-font-name”;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    @extend .#{$name}:before;
    }

  12. Luccas Maso

    Or simply @extend .#{$name}:before;

  13. where this number come from “\f09b” ? How to know it?

  14. Yet again you come to the rescue.

    I was forgetting to specify the font-family.

  15. I used a little snippet I found at http://www.weloveiconfonts.com

    [class*="entypo-"]:before {
      font-family: 'entypo', sans-serif;
    }
    

    Works for me…

  16. rodi

    how can you specify the size of the awesome font in the :before or :after

    • Just specify the font size like this font-size:30px;

  17. I have found a similar solution, but without the need of the unicode characters:
    http://dusted.codes/making-font-awesome-awesome-using-icons-without-i-tags

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