Icon Fonts

Chris Coyier’s Icon Fonts are Awesome demo pushed me up to the edge, and seeing how fuzzy image icons look next to ultra-crisp retina display text threw me over. Now, I’m testing out an icon font on this site for the comments, 3 footer links, and even my logo (why not push it all the way). The icons I use are a hodge-podge, pulled from my own stuff, Glyphish, and Gedy Rivera, so I had to toss them all into a font.

icon comparison

For that, I used the fantastically simple mac app, Glyphs. It gets an A+ for suiting my needs perfectly. I put in a B+ amount of effort for results I’m pleased as punch with, though as I learn & test I may shoot for minor improvements from time to time. The font icons may render a tad on the jagged side for older machines, but it’s a fair tradeoff when you’re browsing from a retina iPad.

In addition to Icon Fonts are Awesome, check out Displaying Icons with Fonts and Data- Attributes from John Hicks for help with implementation. If you’re looking to create custom web fonts, check out Shifticons.

Update: 5/20/12

I recently found this Github post on the making of their icon font, Octicons, extremely helpful. I’ve also started a collection of icon font goodness over at Gimme Bar.

19 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • James Finley

    We have been utilizing media queries to provide retina icons, logos, and presentational imagery for the last year at Echo, aided by a custom SASS Mixin (https://github.com/3onesix/SASS-Mixins). What benefit does using a font provide over using images with media queries?

  • Trent

    @James Finley: At the moment I’m digging how easily scalable icon fonts are, especially when they’re positioned alongside text they need to scale with. Plus, you can do things like change their color & CSS transition them on hover.

  • Chris Coyier

    Even your logo is a character in the font? Fannnnncy.

  • Jonathan Simcoe

    This is impressive. I’ve been considering something like this for our projects here at WebMD. Did you use the Glyphs or Glyphs Mini software. The Glyphs Mini app (http://itunes.apple.com/us/app/glyphs-mini/id469036911?mt=12) looks fairly powerful, but I wanted to see if there were any drawbacks that you knew about.

    Cheers!

  • Trent

    @Jonathan Simcoe: Thanks! I used the regular as a demo, but I’m sure I’ll be buying one or the other. If you try Mini, let me know how it goes.

  • Scott Lyttle

    I used the same technique on the menu icons of my blog and the difference in sharpness is very noticeable (+ reduced HTTP requests etc). The only downside is that earlier versions of IE don’t display :before or :after psuedo-elements (even IE8) so your logo just won’t show up which could be an issue..? Unless there is some fix for this which I’m not aware of.

    Nonetheless, thanks for the tip-off on glyphsapp!

  • Benjamin Lamb

    This is a great idea, but there’s already a word for “icon fonts” — dingbats.

  • Jonathan Simcoe

    @Benjamin Lamb

    But “icon fonts” sounds more sophisticated. ;)

    @Trent

    I heard back from Georg, the creator of Glyphs & Glyphs Mini and he informed me that Glyphs Mini was expressly made for the production of “icon fonts” and that it exports .otf, which can be used in conjunction with FontSquirrel’s excellent tools. Will be purchasing a copy for work. I’ll let you know how it works.

  • Ryan Schroeder

    Trent, any tips on getting started with Glyphs app?

    Thanks!

  • Trent

    @Ryan Schroeder: Howdy! I’m no expert, but is there anything specific you’re trying to do?

  • Kevin Finlayson

    Thanks for this article, Trent. It prompted me to try using an icon font for the logo and graphics on an upcoming refresh of my site, and I’m very happy with the results. So exciting when a new technique can have such a dramatic impact!

  • Colby

    After reading this article I’m using Glyphs Mini with Illustrator and so far it’s working flawlessly

  • Marcello Damasceno

    Great article! But how about using SVG graphics instead?

  • Trent

    @Marcello Damasceno: In my brain, I’m thinking it’d be more file-size and more http requests.

  • Johnson

    Great, I think this is the future of modern web typography- I will try to use it on my pages.

  • Neil Charlton

    Thanks for this. We put together a little demo using the Iconic Icon set by somerandomdude

    You can change the size, background and icon colors to get a real feel for the power of this technique.

    http://demos.themesto.re/2012/css-icon-buttons/

  • Trent

    @Neil Charlton: Great work!

  • Steve

    @Neil Charlton: realy good work!!!

  • Adrien Sanborn

    @Chris Coyier: a while ago, I noticed that for each article on this site the “TW” in the logo changes color. After reading this article, I see how that was accomplished!

Leave a Reply