Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Icon Fonts are Awesome

css-tricks.com

Post reply on HN
Print view View original

41–48 of 48 posts

Re: Icon Fonts are Awesome

#41

Post by evincarofautumn »

masklinn wrote: post #40
evincarofautumn wrote: post #28

Earlier quoted context omitted.

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.

> 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.

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.

Re: Icon Fonts are Awesome

#43

Post by robin_reala »

Someone wrote: post #42
chrismealy wrote: post #18

Your icon can only use one color.

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 : "A color emoji font in Unicode 6.0 lets you display emoticons"

They hack PNGs into the font itself. More info at http://typophile.com/node/83760#comment-470876

Re: Icon Fonts are Awesome

#44

Post by pornel »

masklinn wrote: post #26
alpad wrote: post #2

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…

> 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. 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,…

You make valid points, but some don't convince me:

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).

Re: Icon Fonts are Awesome

#45

Post by XLcommerce »

TylerE wrote: post #34
masklinn wrote: post #26

Earlier quoted context omitted.

> 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. 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,…

Isn't the argument more that SVG sucks, rather than that there is anything fundamentally wrong with vector graphics?

I don't think you've used svg before. It definitely does not suck.

Re: Icon Fonts are Awesome

#46

Post by TylerE »

XLcommerce wrote: post #45
TylerE wrote: post #34

Earlier quoted context omitted.

Isn't the argument more that SVG sucks, rather than that there is anything fundamentally wrong with vector graphics?

I don't think you've used svg before. It definitely does not suck.

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.

Re: Icon Fonts are Awesome

#47

Post by XLcommerce »

TylerE wrote: post #46
XLcommerce wrote: post #45

Earlier quoted context omitted.

I don't think you've used svg before. It definitely does not suck.

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.

I agree with you that browser support sucks. the technology itself is really cool though. Scriptable, heirarchy based vectors. What's not to like?

Re: Icon Fonts are Awesome

#48

Post by Someone »

robin_reala wrote: post #43
Someone wrote: post #42

Earlier quoted context omitted.

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 : "A color emoji font in Unicode 6.0 lets you display emoticons"

They hack PNGs into the font itself. More info at http://typophile.com/node/83760#comment-470876

Thanks for the pointer. A hack, indeed.
Post reply on HN