Icon Font

Utah Teapot

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





Discover More
Pitch
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...
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
Card Puncher Data Processing
What is an Icon?

This page is icons. They represent symbolic image. Unicode Block Miscellaneous_SymbolsMiscellaneous Symbols From 2600U+2600 to 26FFU+26FF See also: Icon font for special icon font. with the 260ETelephon...



Share this page:
Follow us:
Task Runner