Sprite

1st method: Picture

Sprite - a picture that contains a lot of small pictures.

When using the sprite, instead of several images, only one is loaded, which reduces the load and increases the page loading speed.

Also increases the speed of loading and displaying images, because Pictures in one file are loaded simultaneously.

Sprite example

CSS cпрайт

Sprite CSS:

/* <p><span class="icon icon-settings"></span> Settings</p> */

.icon {
  background: url(sprite.png) no-repeat; /* sprite loading */
  display: inline-block;
  vertical-align: middle;
}

.icon-settings {
  background-position: -399px -10px; /* position over the desired part of the sprite */
  width: 22px;
  height: 22px;
}

Example on JSFiddle

2nd method: Font

With the release of HTML 5, it became available to use fonts to connect icons.

After connecting the font, an icon is displayed instead of a specific letter. An example is glyphicons.com.

<p><span class="glyphicon glyphicon-cog"></span> Settings</p>
<p><span class="glyphicon glyphicon-heart"></span> To favorites</p>

Result:

 Settings

 To favorites

The advantage of using the font above the picture is any size of the icon and the ability to specify any color. But the disadvantage is that there can be only one color for the font icon.