Шрифты иконок: 50 лучших шрифтов с иконоками для веб-дизайна — Записки преподавателя

или

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

14.04.2020

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

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

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

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

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

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

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

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

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

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

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

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

Лицензия: MIT

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

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

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

Лицензия: MIT

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

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

font

Icon Fonts против SVG Icons: что лучше для вас?

Современные веб-страницы невозможно представить без иконок. Они используются везде: в описаниях товаров, контактных данных и многих других элементах страницы. Двумя популярными вариантами реализации значков являются Icon Fonts и SVG Icons. Каковы их преимущества и недостатки? Что выбрать для собственного сайта? Этот пост должен дать вам все ответы.

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

Острые дебаты о шрифтах-значках и шрифтах SVG ведутся уже некоторое время. Теперь мы рассмотрим, что такое иконочные шрифты и значки SVG, как их можно использовать и какой метод следует предпочесть в конкретных ситуациях.

Что такое иконочные шрифты?

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

Иконочные шрифты были де-факто методом добавления векторных значков на веб-сайты до начала 2020 года, когда реальная поддержка SVG в различных браузерах стала стабильной.

Почему иконочные шрифты стали популярны?

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

Во-вторых, возможность указать на файл шрифта позволяет разработчикам использовать любой шрифт по своему желанию, не беспокоясь о том, безопасен ли он для Интернета. Браузеры запрашивают указанный файл и показывают значок.

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

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

Причины, по которым следует избегать использования шрифтов значков

Во-первых, мы упомянули масштабируемость шрифтов значков. Действительно, при необходимости можно изменить цвет шрифта и добавить к нему тень. Однако помните, что к таким значкам можно применить только один цвет. Быть монохромным и иметь ограничения по стилю — один из минусов, который значки шрифтов могут представлять для дизайнеров/разработчиков.

Что касается размера, дизайн иконочных шрифтов предполагает определенную сетку, такую ​​как 16×16, 32×32, 48×48 и т. д. Изменение сетки может привести к потере качества иконки.

Хотя вы можете настроить шрифты значков для различных размеров области просмотра, вы также должны помнить о том, чтобы поместить их в классы aria, чтобы сделать их доступными для браузеров.

Еще одна проблема, которая может возникнуть со значками шрифтов, — это мигание нестилизованного содержимого (FOUC). Чтобы использовать иконочные шрифты, вы должны применить правило @font-face, которое предписывает браузерам выполнять HTTP-запрос для файла шрифта.

При обработке HTML и связанных с ним файлов браузер строит объектную модель документа (DOM) в режиме реального времени. В зависимости от размера файла шрифта, сетевых условий и оборудования пользователя извлечение шрифта может занять некоторое время.

Пока браузер не сможет получить доступ к активу шрифта, он может отображать текстовое содержимое HTML до его полного получения, что приводит к FOUC. Таким образом, есть шанс, что до полной загрузки шрифта вместо значков будут отображаться случайные глифы или символы. Такие вспышки могут раздражать и негативно влиять на работу пользователей.

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

Что такое иконки SVG?

Файл SVG (масштабируемый векторный формат), как следует из названия, представляет собой формат изображения для векторной графики с возможностью масштабирования. Файлы SVG используют язык разметки на основе XML для описания векторной графики. Другими словами, изображения SVG основаны на тексте и могут работать с CSS, JavaScript, DOM и т. д.

Внедрение значков SVG

Существуют различные способы добавления SVG на веб-сайты. Вы можете реализовать иконки SVG либо внешне, в виде изображения с тегом , либо встроить в HTML.

Внешние значки SVG

Для отображения значка SVG следует использовать HTML-элемент , аналогичный загрузке файлов PNG, JPG или GIF:

Встроенные иконки SVG

Встроенные SVG будут выглядеть так:

Этот конкретный тип добавления SVG не увеличивает запросы к серверу и, следовательно, не влияет отрицательно на производительность веб-сайта.

Преимущества использования значков SVG

Давайте рассмотрим основные преимущества использования SVG на веб-страницах.

Масштабируемость

В отличие от изображений PNG или JPEG, значки SVG масштабируются, поэтому ваша веб-страница не будет страдать от потери качества, когда посетители используют различные устройства для ее просмотра.

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

Параметры настройки

SVG более гибкие, чем шрифты значков. Во-первых, вы можете добавить больше цветов с помощью SVG. В отличие от одноцветных шрифтов значков, значки SVG допускают градиенты. Кроме того, вы можете анимировать отдельные штрихи в значках SVG.

Позиционирование значков

Позиционирование шрифта SVG по сравнению со шрифтом значка проще с помощью SVG. Чтобы разместить значок шрифта, вам может потребоваться настроить различные свойства, такие как расстояние между словами и буквами, выравнивание, высота строки или размер шрифта. Для SVG достаточно указать размер.

Меньше запросов к серверу

Как мы уже говорили, при указании иконочного шрифта в CSS с правилом @font-face необходимо указать URL, по которому этот шрифт можно найти. Таким образом, использование правила @font-face означает указание браузеру запрашивать файл шрифта.

При использовании SVG сканеру не нужно отправлять запросы на сервер для отображения значка.

Оптимизация SEO

Поисковые системы могут сканировать и индексировать файлы SVG. Встроенные семантические элементы, такие как