m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-16 01:55:18 +01:00
Code
06a9ca5f4b
blog/content/posts/2012-05-26-html-for-icon-font-usage.md
Matthias Kretschmann d6aa7cdb59
formatting
2019-05-12 16:37:44 +02:00

965 B
Raw Blame History

type title linkurl author date tags
link HTML for Icon Font Usage http://css-tricks.com/html-for-icon-font-usage/ Matthias Kretschmann 2012-05-26 05:13:58+00:00
design

Chris Coyier on an accessible implementation for icon fonts:

Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. [...]

And our major goals here are:

  1. As good of semantics as we can get
  2. As little awkwardness for screen readers as possible

Spoiler: the key is to map the icons to the Private Use Area instead of "real" characters in the font files and injecting them with pseudo elements.

I'm using Font Awesome on this site which comes with icons mapped to PUA, so everything should be good for screen readers. Only concern to me are the quite ineffective CSS selectors like [class*=" icon-"] but this makes it nicely flexible.