Table of Contents

What is an Icon Font?

About

An icon font is a font that contains Icon as character.

Using web font to show graphics. It is very convenient from a development perspective.

You can :

Process

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:

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:

The eot and woff formats are just containers for ttf

Font

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

Editor are not convenient for automated font processing.

Example

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;
}

Documentation / Reference