Иконочные шрифты, альтернативы FontAwesome

Иконочные шрифты, альтернативы FontAwesome

Что такое «Иконочный шрифт» — это обычный шрифт, но вместо букв и цифр в нем отображаются различные пиктограммы и символы. В последние годы такие шрифты активно используют в веб-дизайне, в качестве иконок для сайта. С их помощью можно улучшить юзабилити сайта, упростить восприятие информации. Еще из плюсов использования иконочных шрифтов по сравнению с иконками-картинками:

  • Возможность масштабирования без потери качества
  • Беспроблемная поддержка в большинстве браузеров
  • Возможность стилизации, работа как с обычным текстом
  • Небольшой вес
  • Всего за один запрос на сервер загружаются все необходимые иконки

Кроме использования для сайтов, такие шрифты можно установить и в свою ОС и использовать в программах, например в Фотошопе.

Самый популярный иконочный шрифт FontAwesome https://fontawesome.com/, но поскольку информации о нем и так полно, мы лучше рассмотрим альтернативные шрифты.

StackIcons (http://stackicons.com/)

Этот шрифт в качестве иконок содержит логотипы различных интернет и ИТ брендов.

Шрифт поставляется с CSS, поэтому у вас есть возможность его кастомизации. Иконки  шрифта можно использовать без фона или с фоном сделав из квадратными, с закругленными концами и просто круглыми.

Вы можете использовать цветные иконки, которые повторяют реальные цвета бренда.

Иконочный шрифт StackIcons

Лицензия: SIL Open Font and MIT

Twemoji Awesome (http://ellekasai.github.io/twemoji-awesome/)

Twemoji — это open source проект смайликов от Twitter. Канадский дизайнер Elle Kasai создала на его основе иконочный штифт Twemoji Awesome.

Все имена классов для отображения иконок такие же, как в шпаргалке по Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), но вам нужно использовать тире (-) вместо подчеркивания (_), вот и все.

Иконочный шрифт Twemoji Awesome

Лицензия: MIT and CC-BY for the Emoticon graphics

Octicons (https://octicons.github.com/)

Octicons — это иконочный шрифт от GitHub. Он позволит использовать в вашем проекте те же иконки, что и на GitHub. Доступно более 170 иконок.

Иконочный шрифт Octicons

Лицензия: MIT

Android Icons (https://www.androidicons.com/)

Этот шрифт включает в себя 250 иконок в 5 различных размерах и 14 цветах.

Иконочный шрифт Android Icons

Лицензия: Attribution-ShareAlike 4.0 International

DevIcons (http://vorillaz.github.io/devicons/#/main)

DevIcons — это иконочный шрифт разработанный  Теодором Ворильясом. Он содержит 85 символов и логотипов знакомых приложений для разработки, таких как GitHub, Laravel, Django, Visual Studio и многих других.

Иконочный шрифт DevIcons

Лицензия: MIT

Material Design Iconic Font (http://zavoloklom.github.io/material-design-iconic-font/)

В этом шрифте содержится множество иконок, вдохновленных дизайном Google Material и сгруппированных в 15 различных категорий. Чтобы использовать их, нужно просто подключить файл шрифта Material-Design-Iconic-Font.ttf к сайту, а потом используя эту шпаргалку добавить иконки на сайт. Так же можно изменять размеры, цвета и вообще работать с ними как с обычным шрифтом с помощью CSS.

Иконочный шрифт Material Design Iconic Font

Лицензия: Attribution-ShareAlike 4.0 International

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *