What is an Icon Font?

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)

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.

Font creation

There are four font formats are required for web:

• woff,
• TrueType Fonts (TTF),
• svg
• Embedded OpenType (EOT)

The eot and woff formats are just containers for ttf

List

Professional (and open source, free) icon fonts:

1. Themify (linear icon)
2. Black Tie Light Icon (delivers also font awesome)
3. https://design.google.com/icons/
4. FontAwesome. (with example !)
5. Linearicons - https://linearicons.com/free
6. Entypo bg Daniel Bruce
7. Glyphicons (also bundled within Bootstrap)
8. https://icomoon.io/

Generator

1. http://fontello.com/
2. https://icomoon.io
3. http://fontastic.me/

Editor

• http://fontforge.org/
• Fontlab Studio

Editor are not convenient for automated font processing.

Enhancing a word

<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h2>

[data-icon]:before {
  font-family: icons; /* Icon font,  */
  content: attr(data-icon);
  speak: none; /* ???*/
}

Stand-Alone Icons

<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></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;
}