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

Также, появились сервисы, как платные так и бесплатные, для генерации шрифтов с иконками. Некоторые из них:

Или вот — громадный список источников готовых «иконочных шрифтов» самых разных видов.

О чем речь?

Традиционно, для реализации «иконографии в вебе» и стандартом служили различные bitmap форматы, такие как PNG. Быстрые, легкие и гарантируют точность пикселей, но, не смотря на преимущества, имеющие два существенных недостатка:

  • множественные HTTP запросы к файлам иконок негативно влияют на скорость загрузки страниц (частично проблема решается посредством создания CSS-спрайтов);
  • отсутствие масштабируемости, которое наблюдается при увеличении масштаба страницы (zoom) или при просмотре страницы на устройстве с бОльшей плотностью пикселей и разрешением.

Да, спрайты решают первую проблему. Иконки, объединенные в одно большое изображение, управляемое background-position грузятся единожды. Но масштабируемость — актуальная проблема.

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

Альтернатива

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

На этом преимущества шрифтов не заканчиваются:

  • Кроссбраузерность. В отличие от большинства красивых «вкусностей» в веб технологиях, шрифты поддерживались еще в Internet Explorer 4.
  • Дизайн налету. Шрифты содержат базовую графику, которая потом может быть стилизована с помощью CSS, используя псевдо-классы, классы и любые другие условия доступные в CSS.
  • Минимальный размер файла. Размер файла сгенерированного шрифта может занимать около 10 килобайт, так как содержит далеко не все символы, а только те, которые будут использоваться для иконок.

Безусловно, при наличии преимуществ не обходится без недостатков:

  • Иконки могут иметь только монохромную раскраску. Конечно можно прибегнуть к CSS 3 чтобы использовать градиент, но в итоге — все равно, отдельные части иконок не могут быть другого цвета.
  • Применимо только при использовании сопровождающего текста, описывающего, например, назначение иконки. Можно обернуть текст в тег и потом скрыть текст с помощью, например text-indent:-999em;
  • Создание «иконочного» шрифта может быть сложной ручной работой.
  • Если вы не помешаны на создании шрифтов, то вы всегда ограничены и вынуждены довольствоваться тем, что есть. Но шрифты, предлагаемые сервисами, перечисленными выше, покрывают большинство нужд разработчиков.  К тому же, иконки более эффективны, когда они выполнены в одном стиле и похожи друг на друга.

В следующей части статьи рассмотрим пример практического применения «иконочного шрифта».