mirror of
https://github.com/kremalicious/blog.git
synced 2025-02-03 23:57:46 +01:00
40 lines
1023 B
Markdown
40 lines
1023 B
Markdown
|
---
|
||
|
|
author: Matthias Kretschmann
|
||
|
|
comments: true
|
||
|
|
date: 2012-05-26 05:13:58+00:00
|
||
|
|
layout: post
|
||
|
|
slug: html-for-icon-font-usage
|
||
|
|
title: HTML for Icon Font Usage
|
||
|
|
wordpress_id: 2154
|
||
|
|
categories:
|
||
|
|
- design
|
||
|
|
post_format:
|
||
|
|
- 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](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.
|