В каждом рабочем проекте (сайт, магазин, сервис) для удобства пользователя используются иконки.

Типичный пример — иконка домика как ссылка ведущая на главную страницу.

Исторически дизайнеры рисовали их векторно и сохраняли в формате .ico какого-то стандартного размера.

Этого было достаточно, когда интернетом пользовались только на стационарных компьютерах с мониторами,

но когда появились смартфоны и планшеты с разной плотностью пикселей, отображение иконок усложнилось.

Стандартная иконка 32х32 пикселя продолжала хорошо выглядеть на настольном мониторе, а вот на переносных устройствах визуально стала "побитой".

Как быстрое решение, стали подставлять иконки разных размеров для разных расширений.

Например, иконку домика брали размерами 32х32 и 64х64, отдавая эти размеры для настольной версии сайта и мобильной соответственно.

В итоге количество используемых картинок постоянно нарастало и всё равно не поспевало за развивающимися технологиями.

Выходом стало использование иконок в виде символов шрифта.

Преимущества шрифта:

1. размер регулируется, свойством font-size в css
2. легко меняется цвет, свойством color в css
3. можно использовать анимацию, свойство animation в css

Одним  из наиболее проработанных шрифтом иконок является Font Awesome http://fontawesome.io/icons/

В нем содержатся иконки практически для любого случая жизни.

Для его подключения требуется минимум действий, файл стилей:

<link href="path/to/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

После этого можно вставлять css классы, соответствующие той или иной иконке, в html элементы вашего проекта.

Пример:

<i class="fa fa-icon fa-add"></i>

На этом месте появится иконка кинокамеры.

Основные возможности

Смена размера:

css-классы fa-lg, fa-2x, fa-3x, fa-4x, fa-5x

<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Фиксированная ширина:

css-класс fa-fw, очень полезно, например, в вертикальном списке

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i></a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i></a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i></a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i></a>
</div>

Список иконок:

css-класс fa-ul, симантическое объединение

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i></li>
  <li><i class="fa-li fa fa-check-square"></i></li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i></li>
  <li><i class="fa-li fa fa-square"></i></li>
</ul>

Обтекание текстом:

css-класс fa-pull-right или fa-pull-left

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
<span>Текст, текст</span>

Анимация (вращение или пульсация вокруг своей оси):

css-классы fa-spin (вращение) и fa-pulse (пульсация), работают с loader-иконками fa-spinner, fa-refresh, и fa-cog

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Поворот на определенный градус:

css-классы fa-rotate-* and fa-flip-*

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>

Совместное использование нескольких иконок:

css-класс fa-stack для определения родительского элемента и css-класс fa-inverse для контраста цвета

Иконка твиттера в квадрате

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

Флаг в круге

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

После появления Font Awesome жизнь разработчиков стала намного проще!)