Иконочные шрифты для сайта

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

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

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

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

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

Примеры готовых иконочных шрифтов для сайта

fortawesome.github.io. Самый популярный шрифт Font Awesome. В него входит 519 иконок самой разной тематики.

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

pictonic.co/free Pictonic — необычный иконочный шрифт. Это «логотипный» иконочный шрифт, где собрано более 220 логотипов известных сервисов, браузеров, операционных систем, языков программирования и т.д. Среди символов конечно нет русскоязычных сервисов.

icomoon.io. Бесплатный пакет иконок IcoMoon в настоящее время содержит 490 векторных иконок.

octicons.github.com Еще один небольшой пакет бесплатных иконок GitHub's icons.

typicons.com