blog/content/posts/2012-05-26-html-for-icon-font-usage.md

---
type: link

title: HTML for Icon Font Usage
linkurl: http://css-tricks.com/html-for-icon-font-usage/
author: Matthias Kretschmann

date: 2012-05-26 05:13:58+00:00

tags:
  - design
  - development
---

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](http://fortawesome.github.com/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.
start with content edits 2013-11-18 23:54:59 +01:00			`---`
categories & tags 2018-07-19 02:22:01 +02:00			`type: link`
all posts back to 2011 done 2013-11-19 23:21:19 +01:00
			`title: HTML for Icon Font Usage`
			`linkurl: http://css-tricks.com/html-for-icon-font-usage/`
start with content edits 2013-11-18 23:54:59 +01:00			`author: Matthias Kretschmann`
all posts back to 2011 done 2013-11-19 23:21:19 +01:00
start with content edits 2013-11-18 23:54:59 +01:00			`date: 2012-05-26 05:13:58+00:00`
categories & tags 2018-07-19 02:22:01 +02:00
kill categories 2018-08-30 22:50:09 +02:00			`tags:`
formatting 2019-05-12 16:37:44 +02:00			`- design`
use development tag 2020-05-10 22:57:00 +02:00			`- development`
start with content edits 2013-11-18 23:54:59 +01:00			`---`

			`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:`

formatting 2019-05-12 16:37:44 +02:00			`> 1. As good of semantics as we can get`
			`> 2. As little awkwardness for screen readers as possible`
start with content edits 2013-11-18 23:54:59 +01:00
			`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](http://fortawesome.github.com/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.