Icon Fonts are Awesome
css-tricks.com
css-tricks.com
They are a "workaround" with long history: Windows 95 shipped Marlett for exactly this purpose of using fonts as well-supported vector graphics formats.
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.
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.
Key point: SVG icons don't actually scale that well because SVG lacks hinting.
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.
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.
1. For non-animated icons with few shapes it doesn't matter. SVG performance has come a long way — I've used SVG charts with 3000 nodes and it worked smoothly zoomed in on the 2048px iPad.
Also, rendering of individual font glyphs is not necessarily faster. Hinted subpixel rendering costs, and text rendering engines rely on speed savings from caching prepredered glyphs.
3. Possible, but admittedly ugly with `url(data:text/svg,…)` in CSS.
4. I bet those icon fonts don't have hinting either, and autohinting designed for letters may deform icons.
5. You can reference external SVG files or put SVG in CSS.
7. SVG is styleable with CSS (although CSS internal to the file), so you have even more options for styling icons (e.g. you can have separate colors for fill and stroke or even each part of the icon).
Not to forget Windows too. Many font-face embedded fonts look hideous with Windows' text rendering, alas.
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".
text-shadow: 0 0 5px #0000ff; <canvas width=50 height=50 class="icon icon-check">