HTML for Icon Font Usage

css-tricks.com

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.