Icon Font
> (Data|State) Management and Processing > Data Visualization Foundation
Table of Contents
1 - About
Icon font
Using web font to show graphics. It is very convenient from a development perspective.
You can :
- change the size
- change the color
- shadow their shape
2 - Articles Related
3 - Process
3.1 - Icon Design
Designer designs the icons. Each pictogram has been drawn for pixel perfection at a size of 20 x 20 pixels. The icons are created in a vector format (Svg)
3.2 - Symbol Mapping
Multiple icons are turned into fonts. Most projects make use of maybe ten, twenty pictograms and a font containing all pictograms is then unnecessary large.
Deciding on which unicode position to use for each glyph is a huge task and also a source of great debate.
Mapping icons:
- to the closest unicode symbol with the same meaning.
- to the Private Use Area (PUA) of Unicode.
A important issue occurs when the icon fonts come pre-mapped to letters. So in the worse case, they can be read outloud by screen readers.
3.3 - Font creation
There are four font formats are required for web:
- woff,
- svg
- Embedded OpenType (EOT)
The eot and woff formats are just containers for ttf
4 - Font
4.1 - List
Professional (and open source, free) icon fonts:
- Themify (linear icon)
- Black Tie Light Icon (delivers also font awesome)
- FontAwesome. (with example !)
- Entypo bg Daniel Bruce
- Glyphicons (also bundled within Bootstrap)
4.2 - Generator
4.3 - Editor
- Fontlab Studio
Editor are not convenient for automated font processing.
5 - Example
5.1 - Enhancing a word
<h2 id="stats"> <span aria-hidden="true" data-icon="⇝"></span> Stats </h2>
[data-icon]:before { font-family: icons; /* Icon font, */ content: attr(data-icon); speak: none; /* ???*/ }
5.2 - Stand-Alone Icons
<a href="#rss" class="icon-alone"> <span aria-hidden="true" data-icon="▨"></span> <span class="screen-reader-text">RSS</span> </a>
.icon-alone { display: inline-block; /* Fix for clickability issue in WebKit */ } .screen-reader-text { /* Reusable, toolbox kind of class */ position: absolute; top: -9999px; left: -9999px; }