- Иконочные шрифты
- это шрифты, каждый символ которого представлен иконкой.
—
Иконочные шрифты в последнее время набрали большую популярность в современных веб-сайтах, ниже мы расскажем почему.
До появления иконочных шрифтов дизайнеры и верстальщики делали сайты с использованием растровых иконок. Это было красиво, но довольно неудобно. Современный Интернет меняется и на место растровых иконок пришли векторные иконки, выполненные в виде шрифтов.
Принцип работы таких шрифтов прост, к web странице, с помощью CSS стилей, подключается дополнительный файл шрифта. Веб-мастер в стилях сайта указывает свойства иконок (размер, цвет, тень и прочие) и в разметке страницы пишет специальные теги, на месте которых и появляются иконки.
Рассмотрим плюсы и минусы использования иконочных шрифтов:
Преимущества
- множество уже готовых наборов иконок с общей стилистикой;
- удобный поиск по иконкам дают сами авторы наборов;
- иконочные шрифты одинаково четко отображаются на всех экранах устройств, даже retina;
- упростился процесс работы верстальщика при составлении HTML верстки макета;
- иконки грузятся в виде одного файла шрифта, стало проще и выгоднее использовать CDN;
- можно выбрать цвет иконки и ее размер;
- можно манипулировать фоном иконки, например выставить цвет или залить изображением;
- можно изменять CSS стили иконки при наведении пользователем мышкой на иконку, то есть добавить больше интерактивности;
- к иконке можно применить современные CSS3 стили, такие как тени, трансформации и анимация.
Недостатки
- дизайнеру трудней изменить внешний вид иконки, так как требуются дополнительные знания векторной графики и соответствующих программных пакетов;
- после изменения иконки, необходимо собирать набор иконок в файлы шрифта и конвертировать в различные форматы, что без навыков и соответствующего ПО сделать проблематично (частично решаемо с помощью fontello.com);
- грузится весь набор иконок, даже если вы используете на странице всего несколько (решаемо с помощью fontello.com).
Выводы
Сравнив плюсы и минусы иконочных шрифтов видно, что первые с лихвой перекрывают вторые. Из серьезных недостатков можно выделить только один — дизайнеру труднее работать с иконочными шрифтами, но зато сколько удобства пользователям
Если вы еще их не используете иконочные шрифты на своих сайтах, то вам пора начать это делать.
fontello.com
fontello.com — этот сервис который позволяет объединять иконки веб-шрифтов для использования в собственных сайтах.
С fontello можно:
- получить доступ к популярным наборам иконочных шрифтов, созданных профессионалами и распространяющихся под open source лицензиями;
- объединить символы из нескольких шрифтов в один файл;
- сжать иконки в коллекциях, что минимизирует размер файла шрифта.
Как работать с fontello.com.
- выберите иконки, которые вам нравятся;
- добавьте свои иконки если необходимо;
- настройте имена классов, которые будут использоваться во время верстки;
- настройте коды символов иконок;
- скачайте готовый набор.
Fontello сам генерирует все необходимые файлы шрифтов и стилей, остается только подключить эти файлы к проекту или сайту.