Как подключить иконки на веб страницу

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

В этой статье мы собрали 9 самых популярных и удобных пакетов иконок, которые может предложить сеть. Мы разделили их на 3 категории: иконки шрифты, иконки SVG и CSS. Прежде чем мы перейдем к ресурсам, давайте быстро рассмотрим плюсы и минусы каждого типа:

Иконки шрифты

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

SVG иконки

Масштабируемая векторная графика (SVG) представляет собой векторный графический формат на основе XML, который может масштабироваться до любого размера, не теряя качества. Они могут отображаться с помощью CSS, тегов объектов, тегов img или встроенных в ваш HTML. SVG поддерживаются в современных браузерах, но не имеют поддержки в более старых версиях IE и Android 2.3 и ниже.

CSS иконки

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

1

Feather Icons

Feather Icons pack

Feather Icons является одним из самых популярных наборов иконок с открытым исходным кодом. Все значки разработаны на сетке 24×24 и имеют одинаковый округлый угол, придавая им одинаковый вид. Проекты для простой интеграции доступны для Angular, Vue и React.

2

Linea

Linea пакет иконок

Linea предлагает огромный выбор красиво оформленных современных иконок, которые имеют острый, очерченный вид. Все значки удобно разделены в разных категориях, включая Basic, Music, Ecommerce, Software и многое другое.

3

Octicons

Octicons иконки

Octicons — это масштабируемый набор иконок SVG ручной работы GitHub. Он включает в себя GitHub и связанные с программированием значки, такие как значок базы данных, значки операций git и многое другое.

4

Glyph

Glyph иконки

Набор иконок SVG с красивыми иконками, с идеальными формами, предназначенные для современной сети. На GitHub проекта вы можете загрузить скрипт Node.js для настройки пакета значков, включив только нужные вам значки.

5

Font Awesome

Font Awesome пакет иконок

Самый популярный пакет иконок в Интернете (более 50 000 звезд в GitHub), Font Awesome предлагает большую коллекцию иконок, которые созданы для масштабируемости, универсальной поддержки браузеров и хорошей доступности для пользователей с ослабленным зрением.

6

Ionicons

Ionicons пакет иконок

Отличная подборка, сделанная командой Ionic Framework. Предлагает более 260 красивых иконок, некоторые в толстом плоском стиле и другие в современном тонком стиле.

7

Material Icons

Material Icons пакет иконок

Официальный пакет иконок для Material Design и всех значков в Android. Он содержит более 900 значков, которые создаются в соответствии с материальным стилем, гарантируя, что они всегда будут отлично смотреться вместе.

8

Icono

Icono пакет иконок

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

9

CSS ICON

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

Похожие публикации

Комментарии