Иконочные шрифты: преимущества и недостатки
Иконочный шрифт - это набор иконок, которые используются в верстке сайтов как обычные шрифты. Их отличие состоит в том, что в этом наборе вместо букв и символов находятся значки (иконки). Подключить такой шрифт не сложнее обычного, а стилизовать легко с помощью CSS.
Преимущества иконочного шрифта перед изображениями:
- Иконки шрифтов имеют векторый формат. Это означает, что иконки можно увеличивать без потери качества (в отличие от растрового изображения).
- CSS-оформление. Как и с обычным текстом, работают все свойства CSS.
- Для загрузки иконок понадобиться только один http запрос. При использовании растровых изображений также можно сократить количество запросов за счет применения спрайтов, но это не всегда бывает удобно.
- Высокая скорость загрузки за счет небольшого размера. Для примера, файл стилей Font Awesome весит всего 31КБ.
- Кроссбраузерность (включая IE ранних версий)
Положительные стороны такого подхода очевидны, но есть и недостатки. Используя стандартный набор иконок, дизайнер не сможет создавать сложные изображения, накладывать цвета друг на друга. Он ограничен только теми иконками, которые уже есть в шрифте.
Популярные библиотеки иконочных шрифтов:
- Font Awesome. Изначально создавался под Bootstrap, но сейчас активно используется как самостоятельная библиотека. Содержит 675 иконок.
- Fontello. Сервис отличается тем, что мы сами можем определить набор иконок, которые хотим включить в свой шрифт. Сюда же можно добавить нужные иконки и из Font Awesome.
