Иконочные шрифты и почему они не нужны

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

Зачем

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

• масштабируется без потерь качества
• не нужно ретинизировать
• легко редактировать (применительно к иконочным шрифтам — условно)

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

Как делали

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

Надо было поменять размер — указывали 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><use></use></svg>. Вариантов как вставить такое в разметку уйма: от простенького gulp-file-include, до PHP-шного инклуда.

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

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

Как это происходит у меня

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

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

Вставляю иконки с помощью ссылки на конкретный символ в спрайте:

<svg width="24" height="24">
  <use xlink:href="img/sprite-svg.svg#icon-vk"></use>
</svg>

Единственный минус — это отсутствие в IE поддержки такого добавления иконок. Для коррекции использую svg4everybody.