Иконочные шрифты — такие шрифты, где вместо букв — иконки.

Зачем

Векторное изображение для иконок предпочтительно:

Мы всегда хотели векторные иконки, но у нас не было поддержки SVG (SVG родился в начала 2000-х, но хорошая поддержка браузерами появилась только с уходом IE8). А вот шрифт можно подключить к странице даже в IE6. Каждый символ в шрифте — векторная форма. Вполне логично сделать такой шрифт, в котором вместо букв иконки.

Как делали

Шли на fontello.com, искали (удобный поиск, особенно радует результат поиска по слову shit) там нужные иконки и тыкали их мышью, вписывали название шрифта и скачивали. Потом для вставки в нужное место иконки, писали:

<i class="icon-home"></i> <!-- тут home — имя иконки -->

Надо было поменять размер — указывали font-size , надо было менять цвет — указывали color , тень — text-shadow . Нужно было двуцветную иконку — извращались, накладывая один символ на другой.

Современная альтернатива

SVG. Векторный формат с отличной кроссбраузерной поддержкой. Идеален для иконок!

Иконочный шрифт в сравнении с SVG

Далее я буду сокращать «иконочный шрифт» до «ИШ».

ИШ: нужно несколько файловых форматов шрифта, чтобы подключить к странице.
SVG: один файл чтобы править всеми

ИШ: одна иконка — один цвет
SVG: сколько угодно цветов

ИШ: монолитна
SVG: можно управлять частями иконки — стили, скрипты

ИШ: применяется экранное сглаживание шрифта (разная плотность на разных настройках в одной ОС и на разных ОС, непопадание линий в пикселы)
SVG: нет никакого дополнительного неуправляемого сглаживания, гораздо легче попасть в экранные пикселы

ИШ: не подгрузится — увидим крякозябры, пока не загрузился стилевой файл и файл шрифта — видим пустоту
SVG: грузим как хотим, можем вставить в разметку (увидим даже с неподгруженными стилями)

ИШ: не работает в Opera mini
SVG: работает в Opera mini

ИШ: изначально все иконки упакованы в единый файл (хотя и нужно несколько файловых форматов)
SVG: нужно отдельно упаковывать, чтобы иметь один файл с SVG-спрайтом

Как безболезненно отказаться от иконочного шрифта в своем рабочем процессе

Два варианта под разную степень погружения в верстку/фронтенд. Предполагается желание оперировать примерно тем же набором иконок, что можно найти на fontello.com.

Самый простой вариант (есть лучше)

Шаг 1. Получаем несколько SVG-файлов. Либо находим в сети сразу отдельные SVG файлы (flaticon.com особенно хорош!), либо получаем SVG из иконочного шрифта (который толькочто сделали на fontello.com) через сервис icomoon.io.

Шаг 2. Прогоняем его через оптимизатор.

Шаг 3. Выгружаем полученные SVG-иконки на iconizr.com, получаем архив с примером их применения похожим на иконочный шрифт образом. Сегодня (конец ноября 2016 года) я получил с этого сервиса архив с несколькими вариантами вставки (в т.ч. с конверсией в растр), самый интересный (и похожий на иконочный шрифт) среди них такой: SVG вставлен внутри CSS:

.icon-clock {background-image:url('data:image/svg+xml,%3Csvg%20...'); background-repeat:no-repeat}
.icon-clock-dims {width:32px; height:32px;}

Это позволит легко вставить SVG и избежать запроса за картинкой на сервер, но не даст легко управлять цветом иконки.

Простой и хороший вариант

Шаг 1. Получаем набор отдельных SVG файлов или иконочный шрифт с fontello.com. Если это отдельные файлы, прогоняем через оптимизатор.

Шаг 2. Импортируем это на icomoon.io и выбираем все иконки. В настройках проекта снимаем ненужные флажки, в частности, все флажки файловых форматов (SVG скачается в любом случае), нажимаем «download».

Шаг 3. Берем из скачанного архива файл symbol-defs.svg , (в нем содержится библиотека символов), вставляем этот файл в разметку и используем SVG-иконки по принципу symbol → use. Получаем возможность управлять размером и заливкой каждой иконки.

Приятный вариант

  1. Получаем набор SVG файлов в папке проекта
  2. Автоматически оптимизируем их
  3. Автоматически сшиваем их в SVG-спрайт с символами
  4. Автоматически делаем этот SVG скрытым
  5. Полученный SVG-спрайт вставляем в разметку
  6. Используем <svg width="24" height="24"><use xlink:href="#icon-vk"></use></svg> для вставки иконок в нужные нам места. Вариантов как вставить такое в разметку уйма: от простенького gulp-file-include, до PHP-шного инклуда.

Пункты 2-4 можно выполнять по одной команде из консоли. Приведенные ссылки на средства автоматизации — мои предпочтения, не обязательно использовать именно их, есть аналоги.

Как вариант, вместо вставки спрайта на страницу, можно с помощью JS сохранить его в localStorage браузера посетителя и тем же JS-ом вставлять в разметку при каждом открытии страницы сайта. Это костыль и это не будет работать в случае сохранения посетителем страницы сайта на диск.

Как это происходит у меня (добавлено 28.11)

Запускаю свой автомат командой npm start . В числе прочего, автомат собирает SVG-спрайт из SVG-файлов, лежащих в определенной папке (предварительно они автоматически минимизируются), добавляет в общий JS проекта фрагмент, отвечающий за сохранение спрайта в localStorage посетителя страницы.

Нужно добавить/убрать иконку — добавляю/убираю файл из папки и автоматически происходит пересборка всего и обновление в браузере.

Сам спрайт, как и прочий результат сборки, в git не попадает, только исходники.

При первом визите на странице проекта, JS скачивает (асинхронно) файл SVG-спрайта и пишет его в localStorage посетителя. При открытии второй, третьей, тысячной (и т.д.) страницы проекта, спрайт берется из localStorage, не скачивается. Этот подход имеет минус: нужен включенный и работающий JS и нужно самостоятельно следить за версией спрайта. Когда хочется этого избежать, инклужу спрайт в разметку при сборке.