Иконочные шрифты: преимущества и недостатки

Иконочные шрифты: преимущества и недостатки

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

Преимущества иконочного шрифта перед изображениями:

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

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

Популярные библиотеки иконочных шрифтов:

  • Font Awesome. Изначально создавался под Bootstrap, но сейчас активно используется как самостоятельная библиотека. Содержит 675 иконок.
  • Fontello. Сервис отличается тем, что мы сами можем определить набор иконок, которые хотим включить в свой шрифт. Сюда же можно добавить нужные иконки и из Font Awesome.
Средняя: 5 (1 оценка)

Автор статьи

Владимирцева Кристина

Подпишитесь на нас:

YOUTUBE

INSTAGRAM

FACEBOOK

VK