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

Web Designers should all be using this idea by now: Font Icons.

somerandomdude.com

Post reply on HN
Print view View original

31–40 of 78 posts

Re: Web Designers should all be using this idea by now: Font Icons.

#31

Post by vogonj »

estel wrote: post #24
typicalrunt wrote: post #17

What about browser compatibility? The article doesn't mention how well font icons hold up against different versions of IE. Does anyone know?

CSS Web fonts have been in IE since (essentially) forever, and the :before / :after pseudo-element since IE8.

one thing I'd like to scream from the rooftops about Web fonts in IE, though: IE respects the TrueType/OpenType embedding level, but at least some other browsers (last I checked) don't. if your Web fonts are set to an embedding level below "installable", IE will refuse to embed them and use the default font instead. double-check to make sure your font embeds properly in IE 9 before pushing to production.

edit to add: to check, open up the developer tools with F12, go to the console, refresh your page, and make sure you're free of errors like this:

"CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. iconic_stroke.otf"

(this error taken from the link in the OP, the icons on which completely fail to render properly in IE 9.)

Re: Web Designers should all be using this idea by now: Font Icons.

#32

Post by JoelSutherland »

Leynos wrote: post #13

They missed one obvious disadvantage - it doesn't work where users force their browser to use a specific font. All I see are letters instead of icons. That said, would it not also make more sense to use codepoints within the "Miscellaneous Symbols And Pictographs" range where possible ( http://unicode.org/charts/PDF/U1F300.pdf ), where you'll find things like volume icons, padlocks, pins, etc. These are missing from…

You're describing a weird place where you want to display a semantic document (the html) using some non-semantic style rules (css, specifically :before and :after) and not others (@font-face) and then interpret the result as a whole semantically.

If you want to browser-set font colors, you're going to have a hard time when they match CSS set background colors.

Re: Web Designers should all be using this idea by now: Font Icons.

#34

Post by BerislavLopac »

There is another disadvantage of this approach: many times, icons carry no semantic information at all, just being a design thing. Therefore they are most often (and most correctly) implemented as a background image on a certain HTML element which does carry semantic meaning, like a link or a button.

This approach introduces icons within the semantic markup and/or content, unless they're added by some script, which kinda beats the purpose.

Re: Web Designers should all be using this idea by now: Font Icons.

#37

Post by elisee »

I don't see this as more than a gimmick (a nice one, sure). You end up with mute, non-semantic icon names (single characters) in your CSS, single-color icons only. Vector graphics are nice, but then you might as well go for SVG.

The one valid use case for this is limiting the number of roundtrips & requests. But in the long term, there'll be SPDY (or some other similar protocol) for that. And SPDY fixes the problem for your whole app / page, not just icons.

Re: Web Designers should all be using this idea by now: Font Icons.

#39

Post by drivebyacct2 »

tantalor wrote: post #22

Disqus uses this technique to inherit the font color of the embedding page, To accommodate this wide range of design scenarios, we decided to use our own custom web font via @font-face instead of traditional raster-based icons. This provides us with the flexibility of inheriting font color and size from a site’s existing aesthetic at an incredibly small file size (5kb). Since font-faces are vector-based, we are able…

Disqus is already using a load of JavaScript, I don't understand why they couldn't grok for the color and then set it as a background color for some transparent icons, or some such.

Re: Web Designers should all be using this idea by now: Font Icons.

#40

Post by tantalor »

drivebyacct2 wrote: post #39
tantalor wrote: post #22

Disqus uses this technique to inherit the font color of the embedding page, To accommodate this wide range of design scenarios, we decided to use our own custom web font via @font-face instead of traditional raster-based icons. This provides us with the flexibility of inheriting font color and size from a site’s existing aesthetic at an incredibly small file size (5kb). Since font-faces are vector-based, we are able…

Disqus is already using a load of JavaScript, I don't understand why they couldn't grok for the color and then set it as a background color for some transparent icons, or some such.

An SVG icon would probably work. My best guess is they couldn't reliably determine the correct background color to use.
Post reply on HN