Font-Embedding Icons the Right Way—A Legitimate Alternative to Images

somerandomdude.com

31 pointsjoshuacc4 comments

Where do the default glyphs come from? Are they specified in Unicode standard, and is there a default glyph for every code point? Is there some font that has collected those?

edit: after some googling it appears that those code points are defined to be the glyphs from "ITC Zapf Dingbats". There is reference glyphs for all code points, and there is no "standard" font. I guess some font foundries license ITC Zapf Dingbats to cover that range in their font?

Most Unicode fonts don't include glyphs for all code points (and those that do are usually relatively low quality).

If your selected default font isn't appropriate, an application can use font substitution to render selected glyphs using another font.

I like the mapping to Unicode where possible.

May I ask: What's this like for accessibility? How do screen readers render these?

The icons can be made "invisible" to screen readers by including the icon in a custom data attribute (e.g. [data-icon]) and using the right unicode character.

The creator of IcoMoon (http://keyamoon.com/icomoon/) has made a nice demo video:

http://www.youtube.com/watch?v=EWq7idrW2yU

Reply on news.ycombinator.com