Иконочные шрифты — это шрифты в которых вместо стандартного алфавита содержится различные наборы символов: пиктограммы, стрелочки, карандашики, значки соц сетей, глифы и так далее.
Зачем использовать иконочные шрифты?
Согласно массе исследований — иконки (установленные в правильных местах) повышают юзабилити сайта, так как упрощает взаимодействие пользователя с интерфейсом.
Основные преимущества и недостатки иконочных шрифтов.
Плюсы:
- Легко подключаются.
- Кроссбраузерная поддержка.
- Легко менять цвета и задавать различные css эффекты, такие как тень.
- Масштабируются на лету.
- Имеют довольно небольшой вес.
Минусы:
- Пока не погрузятся стили, вместо иконки будет кубик.
- Нельзя изменить геометрию иконок и покрасить иконку в несколько цветов.
- Если нам к примеру нужно пару иконок, подключаем мы весь набор и грузим его, выход, есть, см. ниже.
Подборка бесплатных иконочных шрифтов
| Название и ссылка для скачки | Количество иконок | Примечание |
| Font Awesome | 1 608 | Пожалуй самый популярный иконочный шрифт с наибольшим количеством иконок. |
| Themify Icons | 352 | Самые ходовые иконки для Web-разработчиков. В комплекте идут SVG иконки. Есть плагин для WordPress. |
| Foundation Icon Fonts 3 | 283 | Иконки от разработчиков довольно популярного CSS Фреймворка. SVG в комплекте. |
| Glyphicons | 250 | По умолчанию включен в Фреймворк bootstrap 3. Скачать с блога. |
| Elegant Icon Font | 360 | Симпатичные иконки от известных WordPress разработчиков |
| Dripicons | 200 | Можно скачать во всевозможных форматах. |
| Pictonic | 266 | IT иконки: соц. сети, браузеры, программирование. |
| Metrize Icons | 300 | В стиле метро. |
| Ionicons | 696 | Довольно неплохой набор иконок |
| Symbol Signs | 50 | Специфический набор. |
| Icomoon | 490 | Здесь не только много иконок — но это еще и конструктор шрифтов, информация о нем есть в конце статьи. |
| Socialico | 72 | Значки соц. сетей в разных стилях. |
| Entypo | 411 | на текущий момент скачать нельзя. |
| MFG Labs Icon Set | 120 | Набор от MFG Labs, разрабатывались для собственных нужд и впоследствии переданы в свободный доступ. |
| Ligature Symbols | 237 | +- как у всех |
| PW Drawn Icon Font | 80 | Выполнены в рисованном от руки стиле. |
| fontelico.font | 30 | |
| Rondo Social Icon Font | 40 | Круглые иконки социальных сетей. |
| Map Icons | 175 | Набор географических значков, которые подойдут для использования на картах от яндекса или гугла. |
| Weather Icons | 222 | Погодные. |
Если вы знаете еще интересные бесплатные шрифты с иконками, пишите о них в комментариях, я их добавлю в статью.
Как подключить иконочный шрифт в HTML сайт или к CMS?
Каждый из вышеперечисленных шрифтов имеет в комплекте: папку (обычно fonts) в которой лежат шрифты:
и css файл с их подключением и стилями.
Чтобы начать пользоваться шрифтами на сайте, вам необходимо загрузить папку fonts — со всем ее содержимым и файл name-font.css загрузить в корень сайта, сделать это можно при помощи FTP клиента (если сайт находиться на хостинге). Затем открыть файл index.html и в секции head подключить css файл:
<link rel="stylesheet" href="name-font.css">
Если сайт на CMS то нужно открыть файл, который отвечает за подключение стилей на сайт (или модуль) и вставить вызов в него.
Альтернатива — создание собственного пака с иконками
fontello.com — сервис при помощи которого можно объединять шрифтовые иконки для использования в собственных сайтах.
Как работать с fontello.com.
- выбираем нужные иконки (так же можно загрузить свои);
- настраиваем имена классов (не обязательно);
- генерируем и скачиваем готовый набор (шрифты и стили);
- подключаем к сайту.
Ну и на последок альтернатива для fontello: icomoon — это еще один конструктор иконочных шрифтов, и на нем можно создавать спрайты из SVG иконок.
