1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-26 11:49:04 +01:00
blog/_src/_posts/2012-05-26-html-for-icon-font-usage.markdown

1013 B

layout title linkurl author date wordpress_id categories post_format
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 2154
design
Link

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.