Меню

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

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


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

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

До появления иконочных шрифтов дизайнеры и верстальщики делали сайты с использованием растровых иконок. Это было красиво, но довольно неудобно. Современный Интернет меняется и на место растровых иконок пришли векторные иконки, выполненные в виде шрифтов.

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

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

Рассмотрим плюсы и минусы использования иконочных шрифтов:

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

  • множество уже готовых наборов иконок с общей стилистикой;
  • удобный поиск по иконкам дают сами авторы наборов;
  • иконочные шрифты одинаково четко отображаются на всех экранах устройств, даже retina;
  • упростился процесс работы верстальщика при составлении HTML верстки макета;
  • иконки грузятся в виде одного файла шрифта, стало проще и выгоднее использовать CDN;
  • можно выбрать цвет иконки и ее размер;
  • можно манипулировать фоном иконки, например выставить цвет или залить изображением;
  • можно изменять CSS стили иконки при наведении пользователем мышкой на иконку, то есть добавить больше интерактивности;
  • к иконке можно применить современные CSS3 стили, такие как тени, трансформации и анимация.

Недостатки

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

Выводы

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

Если вы еще их не используете иконочные шрифты на своих сайтах, то вам пора начать это делать.

fontello.com

fontello.com — этот сервис который позволяет объединять иконки веб-шрифтов для использования в собственных сайтах.

fontello.com

С fontello можно:

  • получить доступ к популярным наборам иконочных шрифтов, созданных профессионалами и распространяющихся под open source лицензиями;
  • объединить символы из нескольких шрифтов в один файл;
  • сжать иконки в коллекциях, что минимизирует размер файла шрифта.

Как работать с fontello.com.

  • выберите иконки, которые вам нравятся;
  • добавьте свои иконки если необходимо;
  • настройте имена классов, которые будут использоваться во время верстки;
  • настройте коды символов иконок;
  • скачайте готовый набор.

Fontello сам генерирует все необходимые файлы шрифтов и стилей, остается только подключить эти файлы к проекту или сайту.