Icon Font

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

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. Entypo bg Daniel Bruce
  4. Glyphicons (also bundled within Bootstrap)

Generator

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


Powered by ComboStrap