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

21–30 of 48 posts

Re: Icon Fonts are Awesome

#21

Post by sopooneo »

blutonium wrote: post #3
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…

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.

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.

Re: Icon Fonts are Awesome

#22

Post by Too »

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.

Re: Icon Fonts are Awesome

#23

Post by mbq »

mmatants wrote: post #13
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…

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.

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.

Re: Icon Fonts are Awesome

#24

Post by justincormack »

blutonium wrote: post #3
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…

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.

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

Re: Icon Fonts are Awesome

#26

Post by masklinn »

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

Re: Icon Fonts are Awesome

#27

Post by WiseWeasel »

philippK wrote: post #11
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…

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-... Key point: SVG icons don't actually scale that well because SVG lacks hinting.

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.

Re: Icon Fonts are Awesome

#28

Post by evincarofautumn »

Too wrote: post #22

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

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.

Re: Icon Fonts are Awesome

#30

Post by tomelders »

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

Post reply on HN