Icon Font

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

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:

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:

The eot and woff formats are just containers for ttf

4 - Font

4.1 - 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)

4.2 - Generator

4.3 - Editor

Editor are not convenient for automated font processing.

5 - Example

5.1 - 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; /* ???*/
}

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

6 - Documentation / Reference

data/viz/icon.txt ยท Last modified: 2017/10/24 21:52 by gerardnico