Иконочные шрифты

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

По статистике поисковых запросов Google: «иконочный шрифт» – 22 запроса в месяц, «скачать иконки» – 40500 запросов в месяц. Удручающе весёлая статистика 🙁 . Рассмотрим же, с точки зрения дизайнера и верстальщика, почему в вебе стоит (или не стоит) использовать вместо обычных иконок иконочные шрифты и полюбуемся на лучших представителей.

Содержание




Актуальность использования иконок в вебе даже не стоит обосновывать – она очевидна. Рассмотрим сразу плюсы и минусы использования растровых (или просто отдельных) иконок и иконочного шрифта.

Растровые иконки

Пояснение: векторные иконки не рассматриваем, т.к. поддержка svg начинается у IE только с 9 версии, а 8‑я, увы, еще не полностью сошла со сцены.

С точки зрения дизайнера

  • Быстрый поиск: просмотр растровой графики не требует установки дополнительного ПО – удобно.
  • Быстрое внедрение в документ: достаточно перетащить файл в область документа Photoshop/Gimp – удобно.
  • Масштабируется растровая графика плохо, иконку не увеличить без потери качества – не удобно.

С точки зрения HTML‑верстальщика

  • Вытаскивать иконки из макета по одной – умеренно неудобно.
  • Каждый подключаемый ко странице файл генерирует запрос к серверу, для снижения этой нагрузки нужно использовать спрайты – склеивать мелкие графические элементы в единое изображение, позиционируя его относительно блока – относительно долго.
  • Анимировать (в первую очередь – масштабировать) растровые иконки несложно, но качество изображения теряется.
  • С мобильных устройств при масштабировании растровая иконка смотрится не слишком хорошо, а на устройствах с Retina‑дисплеем — плохо. Доля таких устройств растет.

Иконочный шрифт

Это шрифт, каждый символ которого — иконка.

Используются в вебе следующим образом: к странице подключаются файлы шрифта (как и с обычными подключаемыми шрифтами, это несколько форматов), в CSS добавляются правила с селекторами, соответствующими содержанию иконки (класс icon-home, к примеру, может соответствовать иконке «дом»). После этого, в HTML можно написать <span class="icon-home"></span> и на этом месте появится иконка дома. Ничто не мешает использовать и псевдоклассы вместо дополнительных HTML-элементов.
Пример иконочного шрифта.

Преимущества

  • Масштабирование/анимация без проблем (векторная графика), см. пример.
  • Простота использования большого набора иконок.
  • Отлично выглядит на любых дисплеях.
  • На страницах, с которых можно получить такие шрифты, есть удобный поиск иконок.
  • Простое добавление иконки на страницу (взаимодействие только с HTML).
  • Крайне простое изменение цвета и размера иконки (средствами CSS).
  • Легкое изменение тени иконки (средствами CSS3, для поддерживающих браузеров (все, кроме старых IE))

Недостатки

  • Для просмотра иконок нужно открывать веб‑страницу или запускать специфическое ПО.
  • Только один цвет в иконке.
  • Несколько сложнее использовать в графическом редакторе.
  • Без оптимизации шрифт может содержать множество неиспользуемых Вами иконок (неоправданно большой размер файла).

Иконочные шрифты и инструменты работы с ними

fontello.com – абсолютный лидер среди инструментов

Это веб‑сервис с 14‑ю наборами иконочных шрифтов.

Общая методология работы с сервисом проста:

  1. Отмечаем нужные нам иконки кликом (есть удобный поиск, у иконок есть теги) на вкладке Select Icons.
  2. Меняем имена CSS‑классов, если нужно, на вкладке Customize Names.
  3. Меняем коды символов (это сказочно удобно!), которым будут соответствовать выбранные иконки на вкладке Customize Codes.
  4. Скачиваем архив, в котором:
    • Демо‑страница, показывающая работоспособность полученного шрифта.
    • СSS‑файлы (в т. ч. для IE7), готовые к использованию.
    • Файлы шрифта во всех необходимых форматах (в т. ч. ttf).

На выходе этот сервис дает шрифт, содержащий только нужные Вам иконки, расположенные «на тех кнопках», которые Вам удобны. Идеальный инструмент.

Иконочный шрифт WebHostingHub Glyphs

Бесплатен. Огромный (2057 на данный момент) набор иконок, постоянно пополняется. Есть удобный поиск по иконкам. Скачать можно как в виде шрифтов, так и в PNG разных размеров. Прекрасно сочетается с Bootstrap. При скачивании не настраивается.

Иконочный шрифт Font Awesome

Бесплатен. Большой набор иконок, на сайте нет поиска, есть дополнительные стили для иконок (в т. ч. для наложения), отличная интеграция с Bootstrap. При скачивании не настраивается, но присутствует на fontello.com, рекомендую скачивать оттуда (в оптимизированном виде).

Иконочный шрифт Elusive‑Icons Webfont

Можно скачать бесплатно, но нужна регистрация. Сделан для использования с Bootstrap, но может быть использован отдельно. В комплекте SVG и LESS. Присутствует на fontello.com, рекомендую скачивать оттуда.

Иконочный шрифт The Entypo Pictogram Suite

Два бесплатных шрифта небольшого размера (иконки социальных сетей вынесены в отдельный шрифт). Поиска нет, есть неплохая карта символов. В комплекте EPS, PDS, PDF, но, отсутствует CSS (!!!). Шрифт есть на fontello.com, рекомендую скачивать оттуда.

Иконочный шрифт Typicons

Бесплатный, символов немного, поиск неудобный. В комплекте SVG и PNG (24* и 48*), есть минимизированный CSS. Присутствует на fontello.com, лучше скачивать оттуда.

Иконочный шрифт Iconic

Бесплатный. В комплекте растровые иконки 5‑и размеров и 14 разных цветов, SVG и скрипты для конвертации. Шрифт есть на fontello.com, рекомендую скачивать оттуда.

icomoon.io – веб‑сервис, несколько иконочных шрифтов

Есть бесплатный и платные наборы иконок (отличие в количестве), есть поиск по иконкам, можно выбрать иконки для включения в шрифт и назначить им символы. Иконок меньше, чем на fontello.com, генерируемый CSS немного менее удобен.

Иконочный шрифт WebHostingHub Glyphs

Как по мне — самый лучший набор иконок. Вдумайтесь: в комплект входит 2075!!! иконки, плюс возможность скачивать все это богатство еще и в png двух (16 и 32) размеров и цветов 🙂 Помимо всего прочего данный набор прекрасно дополняет набор Bootstrap Icons.


Оставить комментарий