Grow your CSS skills. Land your dream job.

Using Fonts for Icons…

Published by Chris Coyier

Comments

  1. Wait wait wait. You are using a font, that is icon-based to display the actual…uhhh icons?

  2. Permalink to comment#

    Awesome !
    thx chris

  3. I would expect the primary argument for “SVG is better” to be that you can have non-monochromatic icons.

    • Rob
      Permalink to comment#

      The biggest issue with SVG is that it is totally unsupported by Android’s stock browser, so a huge chunk of mobile users will be left out.

  4. sdsadsa
    Permalink to comment#

    On firefox 8.0 this not work now whe your use base64 encoding for font

    eq.

    @font-face {
    font-family: “ico”;
    font-style: normal;
    font-weight: 500;
    src: url(“data:font/opentype;base64,T1RUTwALAIAAAwAwQ0ZGIH4UPXMAAAR8AABDyEZGVE1d7…..

  5. Richard Ayotte
    Permalink to comment#

    Great idea!

  6. Permalink to comment#

    Don’t forget about basic html entities either. For example, phone and fax (print) (can’t increase font size in comment, but you get the idea):
    ☎ ⎙

  7. Permalink to comment#

    I’ve seen a font which is used as an icon in the example of navigation menu with CSS3. And I think it’s very awesome:

    http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/

  8. Graham
    Permalink to comment#

    I realize this blog post is rather old but it disagrees about the pseudo element accessibility fix claiming that it doesn’t work with screen readers in practice (although it probably should): http://filamentgroup.com/lab/dingbat_webfonts_accessibility_issues/

  9. sage
    Permalink to comment#

    You can add in “Common Arguments Otherwise” that you can only produce “one color icons”.

  10. Using fonts for icons is a great way to achieve scalability. The only limitation being colour (and possible compatibility with dinosaur browsers).

  11. Levani
    Permalink to comment#

    Great idea. Where can I see a full list of these type of font icons?

  12. Wicked stuff!

  13. Permalink to comment#

    I’m creating pages in Sharepoint and I’m wondering how I could use CSS in content editor web parts.

    I want to use them to hyperlink to other pages. No fancy programming. Just want to use the code to create beautiful buttons, tweak a few parameters and use my links.

    Can you point me to a solution with some instructions? I’m a baby developer… ;)

    BTW, the DEMO page with the sliders is AWESOME! As well as this site.

    Thank you

    • Permalink to comment#

      With a little investigation, it looks like I should put the CSS code in a text (or HTML?) file and note in the code window of the content editor web part.

      So going back to my original topic, is it possible to have everything in one text file and make it work? How?

      :)

  14. cnwtx
    Permalink to comment#

    Great!

  15. Permalink to comment#

    Awesome stuff! It’s hard to argue against it, because it’s simple and effective. I use something like that on my blog to do sharing icons for rss, twitter, facebook – another advantage is that you can integrate it easily with the design of the site, by using the same font as the heading.

  16. Ruben Rojas
    Permalink to comment#

    This is the best idea and looks awesome for websites.

  17. Danielw
    Permalink to comment#

    I have been working on the idea of doning something like this for at project but so fare i haven’t used it yet and there is one very good reason for this that you don’t address in this article!
    And that is the fact that webfonts dosent render then same way in different browsers, and therefor i haven’t used it yet beacuse i had to make a lot for CSS tweaks and hacks to make sure that en result is the same i all browsers…

    But the idea is great and i’m sure i’m going to find a project where i can use this in the future, but for now i’m sticking with sprites…

  18. Awesome post chris ! just got the post by mail and loving it a lot !
    I also would like to appreciate the nice use of social buttons on the post bottom ! by you !

  19. It would be great if you make simple application for us like the button maker ! so that we can choose a specific icon with custom width and other properties ! and your app will roll out its code !

  20. Permalink to comment#

    Hi! here is a free icon set using @font-face : Raphael icon set. Have a look, I use it on my portfolio. Cheers

  21. Andrew
    Permalink to comment#

    Is it me, or is there a problem with Tumblr and fonts? This works in Opera and Chrome, but not in Firefox or IE.

  22. aurel
    Permalink to comment#

    I love it but I dont know who this works, where do you get these letter/icons in the first place. it might be a thick question, sorry

    • aurel
      Permalink to comment#

      sorry about that, I get it now, that was stupid of me:)

      great great idea

  23. Permalink to comment#

    There is a big problem with this method if you just use a large font like pictos. This font contains a lot of icons that you might never need in you web page. This is why I made a font generator for making “IconFonts”. This tool allows you to select the icons that you want, and then you can assign them to different letters. So the result would be much more efficient. You can check it out here: http//keyamoon.com/icomoon/

    See this live demo page too: http://keyamoon.com/icomoon/#toDemos

    • Permalink to comment#

      “b Loading”… What’s that supposed to mean? ;)

    • Permalink to comment#

      That ‘b’ may only appear temporarily while the font is being loaded. Nevermind the loading; check out the website after the loading is finished.

    • Permalink to comment#

      No, that “b” will always appear while me and others don’t allow certain resources, by using something like NoScript for example.

      I knew what the problem is, and now so do you: font icons rely on JS code serving them. No JS, no custom fonts, no web fonts, no icon fonts.

    • Just for the record, @font-face absolutely does not require JavaScript.

    • Permalink to comment#

      Under the hood it does. @font-face is an embedding relying on JS code.

      For the record, your h1 kulturista-web-1 doesn’t show in my NoScript protected environment :)

    • Nope, it doesn’t. CSS-Tricks custom fonts do, because they are served from TypeKit, which does it’s thing via JavaScript. But @font-face itself does not require JavaScript.

      To confirm, go grab an @font-face kit from Font Squirrel, like this: http://www.fontsquirrel.com/fonts/Cloister-Black

      Open up the demo.html file in a browser where you have JavaScript turned off. The custom font should show up fine. (I just did it and it did).

    • Permalink to comment#

      Are we still talking about NoScript?

    • Permalink to comment#

      OK :)

      Obviously, NoScript is not at the top of your choices.

    • Permalink to comment#

      This post made me think though.

      Oddly enough, browsers don’t have *yet* a native built in method to assist users that want to prevent @font-face resources from loading.

      I guess sometime in the not so distant future they will have one too, like in the case of images, styles, add-ons etcetera.

    • As Chris has said font-face does not need Javascript so there’s no need for a noscript hack. It has absolutely nothing to do with Javascript. I’m not sure why you would want to disable font-face, either. Having said that I think web designer should think strongly about the legibility of certain fonts for those who can’t see so well – maybe if you use strange, decorative fonts you could have some sort of option on the site to turn them off for users who find them hard to read.

    • Permalink to comment#

      Apparently you too aren’t a big fan of NoScript: http://noscript.net :)

      My whole point revolves around the fact that @font-face means, in fact, a downloadable resource.

      Such downloadable resources, like Javascript, images, ActiveX, style sheets, flash can be stopped from loading using standard browser options.

      So far, to my knowledge anyway, only NoScript offers you a option, as a user controlling its own environment, as it should normally be.

      My guess is @font-face will soon be put to scrutiny and an option would be included for it too, so that the user can have its say over what goes on its machine and what not.

      Maybe you don’t believe in this stuff, but, for me, for various reasons, security and otherwise, it’s actually more important than responsive layout or accessibility.

    • Permalink to comment#

      Consider this one aspect:

      Somebody uses @font-face to replace on your machine what is normally a letter with a custom offensive symbol.

      Hoax or bad intent, it’s an open gate for abuse.

      The list can go on, since, unfortunately, imagination has been a tool serving evil as much as it has been a tool for making good.

    • Permalink to comment#

      On a more light and childish note:

      Using custom web fonts, a message that reads “I am writing an article about @font-face” in a normal font face, could magically turn into a secret love message or a spies message by replacing glyphs in the custom font being served only under certain conditions: logins etcetera :)

  24. Permalink to comment#

    It should work, in theory at least.

    In practice, “*dings” fonts just didn’t work. Why should that change now?

    Never mind (again) the occasional rendering ugliness, which pretty much hurts your design rather than helping it. Which is the strongest point that makes me believe font icons will never work.

  25. Wow this is awesome, I have emailed our development team to start using the information within this article. Once we have used this information in a project we will share this and show you what we have been able to do.

  26. phantom.omaga
    Permalink to comment#

    YES i totally agree. It sure is an awesome idea, really time saving and much more efficient as you point it out .
    So thanks!!!!!

  27. Scott Vivian
    Permalink to comment#

    Using junk letters for icons just doesn’t sit right with me. Not just for screenreaders, but people without Javascript and search engines. Keeping them to pseudo-elements is fine for now, but we know that many developers will misuse them. At some point, screenreaders and search engines will be smart enough to read pseudo elements.

    It would be better if the icons were on Unicode characters – there are a bunch of “free” positions to use for any characters and you could use better icons for existing characters (like the ☎ that Corey posted above, could be a mobile phone icon). Heck, even punctuation would be a better option than A-Z.

  28. lightglitch
    Permalink to comment#

    I’m using this technique in http://lightglitch.github.com/bootstrap-xtra/ but I’m having problems on how the font is rendered in linux which appears to be different from windows.

    Did you face this problem? And how did you solved it?

  29. gustavodiazjaimes
    Permalink to comment#

    why not to use utf-8 symbols rather than letters?

    • gustavodiazjaimes
      Permalink to comment#

      for example: http://www.fileformat.info/info/unicode/block/miscellaneous_symbols/utf8test.htm
      ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯

      the square no found symbol will not apear if the symbol is defined in the font

    • Mandy
      Permalink to comment#

      Unicode is a much better, reliable way of serving icons, and it ensures that users become accustomed to certain symbols meaning certain things, instead of everyone using their own silly iconography typefaces to possibly infer completely different things. Additionally, screen readers already know how to pronounce the characters.

      Not sure why Chris is condoning this practice, since web type alone renders horribly on Windows machines and even on a Mac, if you adjust the font size from the 62px in his example down to a much more reasonable 10-12px for icon purposes, they get fuzzy from the anti-aliasing, canceling out the purpose of using them anyway. I want as much as the next guy to be able to incorporate something like this, but right now it doesn’t look good at all and is just another way for the uneducated designer to confuse/frustrate his users.

      http://www.personal.psu.edu/ejp10/blogs/gotunicode/2009/08/accessibility-and-unicode.html

      This article is a few years old, but I think it is still entirely relevant.

  30. Permalink to comment#

    amazing post and you have really amazing command over CSS !!! do you provide tuition for that ?? :D if you do i would like to subscribe for your class :) even professors of our college does not have this much command over CSS :)

  31. I’ve experimented with using fonts to make cool little loading icons, instead of animated GIFs. Unfortunately, not all circular icons have their center actually in the middle, so a lot of them rotate off center. However, I did have some success. You can see my mixed results here: http://jsfiddle.net/GXJnN/7/

    Yeah, they aren’t perfect, but there’s a couple there you could definitely use and the off-center problem is not as noticeable when they are shrunk down to a smaller size.

    Enjoy!

  32. Permalink to comment#

    cool

  33. Mikkel
    Permalink to comment#

    HAHA, love that demo-page!

  34. Permalink to comment#

    Agree, this is the way to go. Very cool.

  35. Guilherme Ventura
    Permalink to comment#

    Great tutorial!

    i’m already using this technique, but i’m afraid with just one thing: the use of the pseudo-selector :before, anyway, i know it will only affect the users in questions of accessibility.

    Regards!

  36. Permalink to comment#

    This is so cool. May have to look at ways to use it myself.

  37. John Natoli
    Permalink to comment#

    This is awesome. Period.

  38. ThomasH
    Permalink to comment#

    Genius! Anybody know of any Google Web Fonts that contain good icons/dingbats?

  39. Awesome work, as always Chris. I was fired up to use fonts for icons back when we started jQuery Mobile, but support was spotty. This got me fired up again because it’s been more than a year so I tested your demo page on a broad cross-section of mobile devices here at the lab. I thought I’d share the results:

    https://github.com/jquery/jquery-mobile/wiki/Fonts-for-icons—support-on-mobile-browsers

    In a nutshell, loading custom fonts works on a lot of newer mobile platforms, but Blackberry, WebOS, older Android and iOS all fail to load the font you you’re left with the default font set and th odd characters instead of icons.

    So this is only viable if we can figure out how to only apply this technique to browsers that support it because it doesn’t fail gracefully. If we can crack that nut, this is golden.

  40. Permalink to comment#

    This is pretty darn awesome :3

  41. Permalink to comment#

    awesome i have much css code but always i forget to use in the exact time any one can tell me easy way to memorize lots of code thanQ

  42. Maybe I’m repeating someone else’s conclusion or stating the obvious, but I cant help but think how very unfriendly this method must be for screenreaders.

    Offtopic: Is there a way to be notified when someone replies to my comments? I usually forget to check on them as soon as I hit Send.

    • bacha
      Permalink to comment#

      well this what u showed the reason it for me or some one else

  43. Permalink to comment#

    Can’t find any information about total font weight

  44. For font designers, in order to avoid using arbitrary characters for CSS icons when there’s no clear Unicode equivalent (which may be the case half of the time), the ideal solution is to use the approach of many OpenType fonts: map generic ornaments as alternates of the ‘bullet’ character (U+2022). OpenType features can be accessed in CSS3 with the font-feature-settings property, yet currently only Mozilla Firefox engine (Gecko) supports it and in a experimental way.

  45. Permalink to comment#

    I have solved the problem with screen readers. My Icon-Font Generator now features an option for assigning your icons to the “Supplementary Private Use Area” of the Unicode. Watch this short video demo to see how Apple’s VoiceOver reads a page with an icon font. You can see that VoiceOver does not read any extra letters. With this update, IcoMoon is the first, and right now the only icon font out there that is fully compatible with screen readers. You can download a free version if you are interested. This package features 40 icons at the moment but more will be added over time :)

  46. Laurent
    Permalink to comment#

    How do you deal with the font smoothing in IE and Firefox?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".