Icon Font

Utah Teapot


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


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



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)



Editor are not convenient for automated font processing.


Enhancing a word

<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
[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>
.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

Discover More
Text - (Rendering) Font

A font is a set of glyphs where each glyph represents a character. See Hack - A typeface designed for source code albert...
Card Puncher Data Processing
UI - Icon

A page icon. Google Cloud Platform icon: svg: 128×115, png: 256×256 Icon font Unicode Block Miscellaneous_SymbolsMiscellaneous Symbols From 2600U+2600 to 26FFU+26FF See also: Icon font...
Data System Architecture
What is an Emoji and how to use them

This page is all about emoji characters, what they are and how you can use them to add a little bit of emotion in your content

Share this page:
Follow us:
Task Runner