Иконочные шрифты — это шрифты в которых вместо стандартного алфавита содержится различные наборы символов: пиктограммы, стрелочки, карандашики, значки соц сетей, глифы и так далее.
Зачем использовать иконочные шрифты?
Согласно массе исследований — иконки (установленные в правильных местах) повышают юзабилити сайта, так как упрощает взаимодействие пользователя с интерфейсом.
Основные преимущества и недостатки иконочных шрифтов.
Плюсы:
- Легко подключаются.
- Кроссбраузерная поддержка.
- Легко менять цвета и задавать различные css эффекты, такие как тень.
- Масштабируются на лету.
- Имеют довольно небольшой вес.
Минусы:
- Пока не погрузятся стили, вместо иконки будет кубик.
- Нельзя изменить геометрию иконок и покрасить иконку в несколько цветов.
- Если нам к примеру нужно пару иконок, подключаем мы весь набор и грузим его, выход, есть, см. ниже.
Подборка бесплатных иконочных шрифтов
| Название и ссылка для скачки | Количество иконок | Примечание |
| [mask_link href=»https://fontawesome.com/» target=»_blank»]Font Awesome[/mask_link] | 1 608 | Пожалуй самый популярный иконочный шрифт с наибольшим количеством иконок. |
| [mask_link href=»https://themify.me/member/aff/go/web-revenue?cr=aHR0cHM6Ly90aGVtaWZ5Lm1lL3RoZW1pZnktaWNvbnM%3D» target=»_blank»]Themify Icons[/mask_link] | 352 | Самые ходовые иконки для Web-разработчиков. В комплекте идут SVG иконки. Есть плагин для WordPress. |
| [mask_link href=»https://zurb.com/playground/foundation-icon-fonts-3″ target=»_blank»]Foundation Icon Fonts 3[/mask_link] | 283 | Иконки от разработчиков довольно популярного CSS Фреймворка. SVG в комплекте. |
| [mask_link href=»https://getbootstrap.com/docs/3.4/components/#glyphicons» target=»_blank»]Glyphicons[/mask_link] | 250 | По умолчанию включен в Фреймворк bootstrap 3. Скачать с блога. |
| [mask_link href=»https://www.elegantthemes.com/blog/resources/elegant-icon-font» target=»_blank»]Elegant Icon Font[/mask_link] | 360 | Симпатичные иконки от известных WordPress разработчиков |
| [mask_link href=»http://demo.amitjakhu.com/dripicons/» target=»_blank»]Dripicons[/mask_link] | 200 | Можно скачать во всевозможных форматах. |
| [mask_link href=»https://pictonic.co/free» target=»_blank»]Pictonic[/mask_link] | 266 | IT иконки: соц. сети, браузеры, программирование. |
| [mask_link href=»https://www.alessioatzeni.com/wp-content/cache/page_enhanced/www.alessioatzeni.com/metrize-icons/_index.html_gzip» target=»_blank»]Metrize Icons[/mask_link] | 300 | В стиле метро. |
| [mask_link href=»https://ionic.io/ionicons» target=»_blank»]Ionicons[/mask_link] | 696 | Довольно неплохой набор иконок |
| [mask_link href=»https://www.designworkplan.com/read/symbol-signs» target=»_blank»]Symbol Signs[/mask_link] | 50 | Специфический набор. |
| [mask_link href=»https://icomoon.io/#preview-free» target=»_blank»]Icomoon[/mask_link] | 490 | Здесь не только много иконок — но это еще и конструктор шрифтов, информация о нем есть в конце статьи. |
| [mask_link href=»https://www.fontfabric.com/fonts/social-media-icons-pack/» target=»_blank»]Socialico[/mask_link] | 72 | Значки соц. сетей в разных стилях. |
| [mask_link href=»http://www.entypo.com/» target=»_blank»]Entypo[/mask_link] | 411 | на текущий момент скачать нельзя. |
| [mask_link href=»http://mfglabs.github.io/mfglabs-iconset/» target=»_blank»]MFG Labs Icon Set[/mask_link] | 120 | Набор от MFG Labs, разрабатывались для собственных нужд и впоследствии переданы в свободный доступ. |
| [mask_link href=»http://kudakurage.com/ligature_symbols/» target=»_blank»]Ligature Symbols[/mask_link] | 237 | +- как у всех |
| [mask_link href=»http://www.peax-webdesign.com/goodies/free-icons/icones-gratuites/icon-font.html» target=»_blank»]PW Drawn Icon Font[/mask_link] | 80 | Выполнены в рисованном от руки стиле. |
| [mask_link href=»https://github.com/fontello/fontelico.font» target=»_blank»]fontelico.font[/mask_link] | 30 | |
| [mask_link href=»https://github.com/ifkas/Rondo» target=»_blank»]Rondo Social Icon Font[/mask_link] | 40 | Круглые иконки социальных сетей. |
| [mask_link href=»http://map-icons.com/» target=»_blank»]Map Icons[/mask_link] | 175 | Набор географических значков, которые подойдут для использования на картах от яндекса или гугла. |
| [mask_link href=»http://erikflowers.github.io/weather-icons/» target=»_blank»]Weather Icons[/mask_link] | 222 | Погодные. |
Если вы знаете еще интересные бесплатные шрифты с иконками, пишите о них в комментариях, я их добавлю в статью.
Как подключить иконочный шрифт в HTML сайт или к CMS?
Каждый из вышеперечисленных шрифтов имеет в комплекте: папку (обычно fonts) в которой лежат шрифты:
и css файл с их подключением и стилями.
Чтобы начать пользоваться шрифтами на сайте, вам необходимо загрузить папку fonts — со всем ее содержимым и файл name-font.css загрузить в корень сайта, сделать это можно при помощи FTP клиента (если сайт находиться на хостинге). Затем открыть файл index.html и в секции head подключить css файл:
<link rel="stylesheet" href="name-font.css">
Если сайт на CMS то нужно открыть файл, который отвечает за подключение стилей на сайт (или модуль) и вставить вызов в него.
Альтернатива — создание собственного пака с иконками
[mask_link href=»https://fontello.com/» target=»_blank»]fontello.com[/mask_link] — сервис при помощи которого можно объединять шрифтовые иконки для использования в собственных сайтах.
Как работать с fontello.com.
- выбираем нужные иконки (так же можно загрузить свои);
- настраиваем имена классов (не обязательно);
- генерируем и скачиваем готовый набор (шрифты и стили);
- подключаем к сайту.
Ну и на последок альтернатива для fontello: [mask_link href=»https://icomoon.io/app/» target=»_blank»]icomoon[/mask_link] — это еще один конструктор иконочных шрифтов, и на нем можно создавать спрайты из SVG иконок.
