12 ms·

Icon Fonts are Awesome

183 points by Peroni 15y ago

alpad 15y ago
Why arent people using SVG for this sort of thing? Isnt that HTML5's vector graphics format? I supose if you're using icons w/ the express purpose of using them with in-line text, then this would be Ideal... but just seems like a weird hack, when there is SVG available... The author of this website claims to simply be ignorant of SVG at the bottom? whats up with that? Why is using a font "hack" better than using the intended container for vector graphics? I guess web design has always sorta been about pushing the bounderies of browser quirks, but I kinda thought we were moving away from that. You would think the intended use of vector graphics would be designed to be just as good if not better than using a font to do the same thing.
- blutonium 15y ago
  IE8 and Android 2.4 don't support it for one, but it does seem SVG has never really had traction. I've heard SVG has poorer rendering performance in most browsers (I'm not actually sure if that's true), and that some folks feel it makes it easier for their assets to be copied.
  - sopooneo 15y ago
    That has always confused me a bit. It seems that most of the stuff that people are doing with canvas requires writing a vector graphics layers on top of it anyway.
  - justincormack 15y ago
    SVG is gaining traction, eg through use of d3.js. svgweb can work as an IE shim. Old Android is a problem, but on the other side Microsoft are doing a good job and pushing SVG in IE9+.
- mexi1010 15y ago
  I'm not all that great at webdesign but I couldn't seem to implement this in CSS. Any suggestions in doing something similar with SVG?
- huffman 15y ago
  The main advantages are listed on the page. Being able to apply CSS styles is the biggest one.
  - gerrit 15y ago
    you can apply css to svg
- hsmyers 15y ago
  SVG would be wonderful if it were not for the lack of native support early on in browser land. That skips over the none trivial problem of what it takes to create a symbol/glyph in SVG. Not only do you have to be a competent typographer, but you also have to be a programmer (SVG is very Postscript like). Yet more barriers to widespread use. None of this is fatal, but like speed-bumps, it certainly slows things down. I'm in general more happy adopting a widely used Unicode font for the things that I need in this category. Your mileage may vary.
  - wladimir 15y ago
    Why would you need to be a programmer to make a SVG symbol/glyph? All vector-drawing programs can export it these days. I think creating a font is more difficult. Having said that, fonts do have some properties that can be advantageous for black-and-white icons; for example, automatically coloring with the text color and style.
- philippK 15y ago
  There was an article posted here 1 day ago that explored to great lengths why SVG for scalable icons sounds good in theory - but does not work well in practice. And why icon fonts are the way to go for now. See here: http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html http://www.pushing-pixels.org/2011/11/04/about-those-vector-... Key point: SVG icons don't actually scale that well because SVG lacks hinting.
  - WiseWeasel 15y ago
    No, the point of that piece was not that icon fonts are the way to go. It was that one vector icon can't just be rendered at different resolutions without changing the level of detail, and most icon designers use vectors to render their large sizes, but often resort to manual bitmap pixel pushing at smaller sizes to get the look they want. The key point is that you need to design different vectors or bitmaps for different actual rendered sizes, with different levels of detail, and one design will never be suitable for all sizes.
- mmatants 15y ago
  Pixel hinting. The desired icons in this case are small ubiquitous monochrome glyphs. Text fonts and font renderers have already optimized that specific use-case tremendously - so why not plug into that.
  - mbq 15y ago
    On the other hand implementing pixel hinting of some shape in a font is quite likely equally hard then writing a JS generator of optimized SVG. Yet rendering speed may be a problem.
- masklinn 15y ago
  > Why arent people using SVG for this sort of thing? Isnt that HTML5's vector graphics format? 1. SVG is slow, text layout engines (therefore fonts) are fast 2. SVG support is pretty terrible (not available on Android < 3, IE <= 8 and that's for support at all, inline-svg-in-HTML is even rarer and it's even easier to hit shitty implementation bugs), fonts are very well supported 3. I don't think you can use SVG in pure CSS, so you need markup, not so with fonts (theoretically you can use SVG as background, practically I'm sure it works half the time best) 4. You can't hint SVG, so it does not scale well from big to small resolutions 5. Mixing SVG and HTML text is absolutely awful, mixing text in an iconic font and actual text is much easier 6. Iconic fonts are trivially "sprited" (bundle all the icons in a single font file), this is more complex in SVG 7. Changing the color of an iconic font to match a new or alternative layout takes all of a single CSS property, likewise to change font (therefore the style of all the iconset) (this assumes the iconsets use the same characters as hooks for equivalent symbols). > You would think the intended use of vector graphics would be designed to be just as good if not better than using a font to do the same thing. You would, wouldn't you? But it turns out fonts are very, very good vector formats for (physical) rendering sizes.
  - TylerE 15y ago
    Isn't the argument more that SVG sucks, rather than that there is anything fundamentally wrong with vector graphics?
    - masklinn 15y ago
      Absolutely (hence my responding to why SVG is not used for this), fonts are vector graphics after all.
    - XLcommerce 15y ago
      I don't think you've used svg before. It definitely does not suck.
      - TylerE 15y ago
        No, I defiantly have, and it does. For a standard 13 years in the making, the number of decent FULL FEATURED implementations is minuscule. Stuff that mostly works likes Inkscape tends to use it's own dialect and not fully support all the features.
fpp 15y ago
For a comprehensive list of the best icon fonts around have a look at simurai's list at http://www.delicious.com/stacks/view/SC3hpq http://www.delicious.com/stacks/view/SC3hpq
tambourine_man 15y ago
You will have to download an entire font even if you are only using a few arrows. May not be prohibitive, but it should be kept in mind.
- acabal 15y ago
  You can create a subset of that font to serve if only using a few icons. I've done that with Scribophile thought I can't recall right now what utility I used to do that.
  - DTrejo 15y ago
    Expert > subsetting > custom subsetting > single characters http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator
- Too 15y ago
  This is what most sites do with css-sprites anyway.
kapowaz 15y ago
I am worried by this trend towards using a custom typeface to store icons. Firstly, whilst it looks great in the giant preview pages linked to on HN, these icons often look terrible at smaller sizes / without anti-aliasing. Secondly, whilst they're undoubtedly efficient when you're going to use a lot of them in various sizes, I question whether that's still true compared to an optimised PNG sprite (which coincidentally can solve the first problem too).
- petercooper 15y ago
  these icons often look terrible at smaller sizes / without anti-aliasing. Not to forget Windows too. Many font-face embedded fonts look hideous with Windows' text rendering, alas.
kaishin 15y ago
No, they are not. At least not yet ➜ http://drp.so/058604 http://drp.so/058604 (16px).
notthemessiah 15y ago
This is minor, but fonts also have sub-pixel rendering.
chrismealy 15y ago
Your icon can only use one color.
- recursive 15y ago
  Not with text-shadow!
- Someone 15y ago
  I would think so, too, but how then, can Mac OS X and iOS 5 show emoji in color? http://www.apple.com/macosx/whats-new/features.html#text http://www.apple.com/macosx/whats-new/features.html#text: "A color emoji font in Unicode 6.0 lets you display emoticons"
  - robin_reala 15y ago
    They hack PNGs into the font itself. More info at http://typophile.com/node/83760#comment-470876 http://typophile.com/node/83760#comment-470876
    - Someone 15y ago
      Thanks for the pointer. A hack, indeed.
Too 15y ago
A big warning for anyone trying this out, don't use it in places where exact placement is required. Browsers (and operating systems) render fonts VERY differently. Just changing the cleartype-settings in windows can make the text placement completely off. Especially after a few letters as the error propagates the more characters you accumulate over one row. Might not be an issue if you only place one letter/icon, which is probably the use case here, but keep this in mind.
- evincarofautumn 15y ago
  This is, I think, the biggest issue with abusing fonts in this way. As a workaround, icon fonts are excellent—but they are still undeniably a workaround. Unfortunately, SVG is the closest we have, and isn’t a viable solution either, for reasons other commenters have thoroughly addressed. I do have (what I think is) a better idea in mind, but I’m not sure how it would ever get adopted.
  - masklinn 15y ago
    > they are still undeniably a workaround. They are a "workaround" with long history: Windows 95 shipped Marlett for exactly this purpose of using fonts as well-supported vector graphics formats.
    - evincarofautumn 15y ago
      Oh, absolutely. It’s just a dealbreaker for me personally that fonts are monochromatic, single-layer, and difficult to position in web pages with precision and consistency. If those aren’t concerns, then icon fonts are a perfectly useful tool.
- makmanalp 15y ago
  Maybe someone should make an ACID-like rendering compliance test for typography?
Johnyma22 15y ago
I used icon fonts on MSH, came out perfect. http://myschoolholidays.com/Wilsden-Primary-School-8639 http://myschoolholidays.com/Wilsden-Primary-School-8639
ianterrell 15y ago
Rabble rabble rabble!
tomelders 15y ago
As always, use the right tool for the job. I've had some luck using icons fonts, but it's by no means a complete solution. Something i would like to see though: ligature support in browsers. That would enable the creation of named icons in the font. so "right-arrow" would literally be a "right arrow".
wavephorm 15y ago
I'm really in favor of an html5 canvas based icon system. <canvas width=50 height=50 class="icon icon-check"> Icon-check then calls a JavaScript function which draws the icon to the canvas. The icon files end up being javascript files which can be gzipped along with other assets.
ck2 15y ago
Can you use an overhead text-shadow to give them a different color border? ie. text-shadow: 0 0 5px #0000ff;
J3L2404 15y ago
Everytime I visit css-tricks I am more and more impressed by the quality of literally everything on the site.
alexchamberlain 15y ago
I would like to see a way for browsers to specify the width/height of an image, so that the server can return an appropriate file.
tseabrooks 15y ago
Quick side note: I hit the "fancy view source" button on the bottom right and I thought it was pretty cool. Hoped it was a draggable bookmarklet, it's not, anyone have a favorite kick ass view source bookmarklet?

183 points by Peroni 15y ago

alpad 15y ago

Why arent people using SVG for this sort of thing? Isnt that HTML5's vector graphics format? I supose if you're using icons w/ the express purpose of using them with in-line text, then this would be Ideal... but just seems like a weird hack, when there is SVG available... The author of this website claims to simply be ignorant of SVG at the bottom? whats up with that? Why is using a font "hack" better than using the intended container for vector graphics? I guess web design has always sorta been about pushing the bounderies of browser quirks, but I kinda thought we were moving away from that. You would think the intended use of vector graphics would be designed to be just as good if not better than using a font to do the same thing.

blutonium 15y ago
IE8 and Android 2.4 don't support it for one, but it does seem SVG has never really had traction. I've heard SVG has poorer rendering performance in most browsers (I'm not actually sure if that's true), and that some folks feel it makes it easier for their assets to be copied.
- sopooneo 15y ago
  That has always confused me a bit. It seems that most of the stuff that people are doing with canvas requires writing a vector graphics layers on top of it anyway.
- justincormack 15y ago
  SVG is gaining traction, eg through use of d3.js. svgweb can work as an IE shim. Old Android is a problem, but on the other side Microsoft are doing a good job and pushing SVG in IE9+.
mexi1010 15y ago
I'm not all that great at webdesign but I couldn't seem to implement this in CSS. Any suggestions in doing something similar with SVG?
huffman 15y ago
The main advantages are listed on the page. Being able to apply CSS styles is the biggest one.
- gerrit 15y ago
  you can apply css to svg
hsmyers 15y ago
SVG would be wonderful if it were not for the lack of native support early on in browser land. That skips over the none trivial problem of what it takes to create a symbol/glyph in SVG. Not only do you have to be a competent typographer, but you also have to be a programmer (SVG is very Postscript like). Yet more barriers to widespread use. None of this is fatal, but like speed-bumps, it certainly slows things down. I'm in general more happy adopting a widely used Unicode font for the things that I need in this category. Your mileage may vary.
- wladimir 15y ago
  Why would you need to be a programmer to make a SVG symbol/glyph? All vector-drawing programs can export it these days. I think creating a font is more difficult. Having said that, fonts do have some properties that can be advantageous for black-and-white icons; for example, automatically coloring with the text color and style.
philippK 15y ago
There was an article posted here 1 day ago that explored to great lengths why SVG for scalable icons sounds good in theory - but does not work well in practice. And why icon fonts are the way to go for now. See here: http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html http://www.pushing-pixels.org/2011/11/04/about-those-vector-... Key point: SVG icons don't actually scale that well because SVG lacks hinting.
- WiseWeasel 15y ago
  No, the point of that piece was not that icon fonts are the way to go. It was that one vector icon can't just be rendered at different resolutions without changing the level of detail, and most icon designers use vectors to render their large sizes, but often resort to manual bitmap pixel pushing at smaller sizes to get the look they want. The key point is that you need to design different vectors or bitmaps for different actual rendered sizes, with different levels of detail, and one design will never be suitable for all sizes.
mmatants 15y ago
Pixel hinting. The desired icons in this case are small ubiquitous monochrome glyphs. Text fonts and font renderers have already optimized that specific use-case tremendously - so why not plug into that.
- mbq 15y ago
  On the other hand implementing pixel hinting of some shape in a font is quite likely equally hard then writing a JS generator of optimized SVG. Yet rendering speed may be a problem.
masklinn 15y ago
> Why arent people using SVG for this sort of thing? Isnt that HTML5's vector graphics format? 1. SVG is slow, text layout engines (therefore fonts) are fast 2. SVG support is pretty terrible (not available on Android < 3, IE <= 8 and that's for support at all, inline-svg-in-HTML is even rarer and it's even easier to hit shitty implementation bugs), fonts are very well supported 3. I don't think you can use SVG in pure CSS, so you need markup, not so with fonts (theoretically you can use SVG as background, practically I'm sure it works half the time best) 4. You can't hint SVG, so it does not scale well from big to small resolutions 5. Mixing SVG and HTML text is absolutely awful, mixing text in an iconic font and actual text is much easier 6. Iconic fonts are trivially "sprited" (bundle all the icons in a single font file), this is more complex in SVG 7. Changing the color of an iconic font to match a new or alternative layout takes all of a single CSS property, likewise to change font (therefore the style of all the iconset) (this assumes the iconsets use the same characters as hooks for equivalent symbols). > You would think the intended use of vector graphics would be designed to be just as good if not better than using a font to do the same thing. You would, wouldn't you? But it turns out fonts are very, very good vector formats for (physical) rendering sizes.
- TylerE 15y ago
  Isn't the argument more that SVG sucks, rather than that there is anything fundamentally wrong with vector graphics?
  - masklinn 15y ago
    Absolutely (hence my responding to why SVG is not used for this), fonts are vector graphics after all.
  - XLcommerce 15y ago
    I don't think you've used svg before. It definitely does not suck.
    - TylerE 15y ago
      No, I defiantly have, and it does. For a standard 13 years in the making, the number of decent FULL FEATURED implementations is minuscule. Stuff that mostly works likes Inkscape tends to use it's own dialect and not fully support all the features.

fpp 15y ago

For a comprehensive list of the best icon fonts around have a look at simurai's list at http://www.delicious.com/stacks/view/SC3hpq http://www.delicious.com/stacks/view/SC3hpq

tambourine_man 15y ago

You will have to download an entire font even if you are only using a few arrows. May not be prohibitive, but it should be kept in mind.

acabal 15y ago
You can create a subset of that font to serve if only using a few icons. I've done that with Scribophile thought I can't recall right now what utility I used to do that.
- DTrejo 15y ago
  Expert > subsetting > custom subsetting > single characters http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator
Too 15y ago
This is what most sites do with css-sprites anyway.

kapowaz 15y ago

I am worried by this trend towards using a custom typeface to store icons. Firstly, whilst it looks great in the giant preview pages linked to on HN, these icons often look terrible at smaller sizes / without anti-aliasing. Secondly, whilst they're undoubtedly efficient when you're going to use a lot of them in various sizes, I question whether that's still true compared to an optimised PNG sprite (which coincidentally can solve the first problem too).

petercooper 15y ago
these icons often look terrible at smaller sizes / without anti-aliasing. Not to forget Windows too. Many font-face embedded fonts look hideous with Windows' text rendering, alas.

kaishin 15y ago

No, they are not. At least not yet ➜ http://drp.so/058604 http://drp.so/058604 (16px).

notthemessiah 15y ago

This is minor, but fonts also have sub-pixel rendering.

chrismealy 15y ago

Your icon can only use one color.

recursive 15y ago
Not with text-shadow!
Someone 15y ago
I would think so, too, but how then, can Mac OS X and iOS 5 show emoji in color? http://www.apple.com/macosx/whats-new/features.html#text http://www.apple.com/macosx/whats-new/features.html#text: "A color emoji font in Unicode 6.0 lets you display emoticons"
- robin_reala 15y ago
  They hack PNGs into the font itself. More info at http://typophile.com/node/83760#comment-470876 http://typophile.com/node/83760#comment-470876
  - Someone 15y ago
    Thanks for the pointer. A hack, indeed.

Too 15y ago

A big warning for anyone trying this out, don't use it in places where exact placement is required. Browsers (and operating systems) render fonts VERY differently. Just changing the cleartype-settings in windows can make the text placement completely off. Especially after a few letters as the error propagates the more characters you accumulate over one row. Might not be an issue if you only place one letter/icon, which is probably the use case here, but keep this in mind.

evincarofautumn 15y ago
This is, I think, the biggest issue with abusing fonts in this way. As a workaround, icon fonts are excellent—but they are still undeniably a workaround. Unfortunately, SVG is the closest we have, and isn’t a viable solution either, for reasons other commenters have thoroughly addressed. I do have (what I think is) a better idea in mind, but I’m not sure how it would ever get adopted.
- masklinn 15y ago
  > they are still undeniably a workaround. They are a "workaround" with long history: Windows 95 shipped Marlett for exactly this purpose of using fonts as well-supported vector graphics formats.
  - evincarofautumn 15y ago
    Oh, absolutely. It’s just a dealbreaker for me personally that fonts are monochromatic, single-layer, and difficult to position in web pages with precision and consistency. If those aren’t concerns, then icon fonts are a perfectly useful tool.
makmanalp 15y ago
Maybe someone should make an ACID-like rendering compliance test for typography?

Johnyma22 15y ago

I used icon fonts on MSH, came out perfect. http://myschoolholidays.com/Wilsden-Primary-School-8639 http://myschoolholidays.com/Wilsden-Primary-School-8639

ianterrell 15y ago

Rabble rabble rabble!

tomelders 15y ago

As always, use the right tool for the job. I've had some luck using icons fonts, but it's by no means a complete solution. Something i would like to see though: ligature support in browsers. That would enable the creation of named icons in the font. so "right-arrow" would literally be a "right arrow".

wavephorm 15y ago

I'm really in favor of an html5 canvas based icon system. <canvas width=50 height=50 class="icon icon-check"> Icon-check then calls a JavaScript function which draws the icon to the canvas. The icon files end up being javascript files which can be gzipped along with other assets.

ck2 15y ago

Can you use an overhead text-shadow to give them a different color border? ie. text-shadow: 0 0 5px #0000ff;

J3L2404 15y ago

Everytime I visit css-tricks I am more and more impressed by the quality of literally everything on the site.

alexchamberlain 15y ago

I would like to see a way for browsers to specify the width/height of an image, so that the server can return an appropriate file.

tseabrooks 15y ago

Quick side note: I hit the "fancy view source" button on the bottom right and I thought it was pretty cool. Hoped it was a draggable bookmarklet, it's not, anyone have a favorite kick ass view source bookmarklet?