1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-16 01:55:18 +01:00
blog/content/posts/2012-05-26-html-for-icon-font-usage.md

26 lines
967 B
Markdown
Raw Normal View History

2013-11-18 23:54:59 +01:00
---
2018-07-19 02:22:01 +02:00
type: link
2013-11-19 23:21:19 +01:00
title: HTML for Icon Font Usage
linkurl: http://css-tricks.com/html-for-icon-font-usage/
2013-11-18 23:54:59 +01:00
author: Matthias Kretschmann
2013-11-19 23:21:19 +01:00
2013-11-18 23:54:59 +01:00
date: 2012-05-26 05:13:58+00:00
2018-07-19 02:22:01 +02:00
2018-08-30 22:50:09 +02:00
tags:
- design
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:
> 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.