Table of Contents

About

This page is about icons. They represent symbolic image.

Example

With a font Glyph given by code point

Unicode Block Miscellaneous Symbols From U+2600 to U+26FF

See also: Icon font for special icon font.

with the Telephon 

.icon-phone:before {
    content: "\260e";
    color: gray;
    font-size: 3em
}

<span class="icon-phone"></span>
Rendered by WebCode

With a font Glyph and a custom font

To show an icon via a custom font glyph, you would:

  • use a character referenced by its code point (Code point of icons/symbol and new characters are in the Private_Use_Areas)
  • and apply the font

Example with material icon 

The character <pre>&#xE145;</pre> is the icon plus: <span class="icon">&#xE145;</span>
  • The font definition and the icon class
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.woff) format('woff'),
    url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.ttf) format('truetype');
}

.icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
  • The result would show you a + icon
Rendered by WebCode

With a font Glyph given by its name (ligature)

A font can add ligatures. A ligature is a combination of characters that represents another character.

As the Material Icons font has the ligature add that points to the character &#xE145;, you can replace the code point &#xE145; of our previous example by the word add. And you will obtain the same result.

Example: 

The icon <mark>add</mark> given by its name: <span class="icon">add</span>
  • Result:
Rendered by WebCode

with Data Image and SVG

URL - The data URL scheme

Within an img element

The hamburger menu icon. 

img {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

<img src="data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>"/>

<!-- Could be also as a file -->
<!-- <img src="public/sound-mute.svg" style="max-height: 40px; max-width: 40px;">-->
Rendered by WebCode

As CSS background image

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17"><g></g><path d="M17 16v1h-17v-1h17zM12 10h2v5h1v-6h-4v6h1v-5zM7 7h2v8h1v-9h-4v9h1v-8zM2 3h2v12h1v-13h-4v13h1v-12z"  fill="rgb(62,153,239)" /></svg>');
}

.navbar-toggler-icon {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    background-size: 100% 100%;
}

<span class="navbar-toggler-icon"></span>
Rendered by WebCode

Implementation

Icons can be represented:

  • as a raster image
  • as vector
    • svg (interoperability problems if you want to print a PDF)
    • symbol fonts (ie as glyph representing an icon, not a character)
  • as CSS sprites (many small images into a single background image)

HTML Performance

Icons are files that are:

  • tiny (small size)
  • many (a lot by pages)
  • fixed (their number does not grow)

Embedding them with the HTML img element means that the browser needs to perform a lot of HTTP requests.

That's why they are generally grouped into a single file:

  • CSS sprites
  • symbols fonts

This file is then configured to be cached into the browser after the first HTTP fetch.

Characteristics

Different design at different sizes

An icon or logo may have subtly different designs at different sizes, such as:

  • changing its line thicknesses
  • dropping some details at small sizes.

With a vector font (svg or font), you can’t have alternative designs for different font sizes.

Scalability

Raster images are not scalable without losing information while vector images are fully scalable.

Width and Height

  • Google Cloud Platform icon: svg: 128×115, png: 256×256
  • Icon font
<svg width="15" height="14" viewBox="0 0 15 14"/>

Tools

  • http://www.grumpicon.com/ - processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.

for symbol font

  • https://fontforge.org/
  • Icomoon lets you upload your SVG files, map them to unicode characters, and export a font for use online.

Guide

Inkscape guide: Inkscape_Guide.md

Repository

Others:

Library (code)

React:

Documentation / Reference

1)
the-era-of-symbol-fonts