Иконочные шрифты для сайта: Иконочные шрифты для сайта — что это и как использовать?

<a href="path/to/settings" aria-label="Настройки">
  <i aria-hidden="true"></i>
</a>
<a href="path/to/settings" aria-label="Удалить">
  <i aria-hidden="true"></i>
</a>
<a href="#navigation-main" aria-label="Перейти к основному меню">
  <i aria-hidden="true"></i>
</a>

<i aria-hidden="true"></i>
<span>Обновление. ..</span>
<i aria-hidden="true"></i>
<span>Сохранение. Держитесь крепче!</span>

<div>
  <span><i aria-hidden="true"></i></span>
  <input type="text" placeholder="Ваш email">
</div>
<div>
  <span><i aria-hidden="true"></i></span>
  <input type="password" placeholder="Пароль">
</div>

<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине">
  <i aria-hidden="true"></i>
</a>

<i aria-hidden="true"></i>
<span>Уровень заряда: 50%</span>

Иконочные шрифты или SVG — что выбрать в 2018? – База знаний Timeweb Community

Графические иконки — ключевой элемент практически любого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. Если не брать в расчет стандартные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Что лучше? Разберемся ниже.

Эволюция иконок

Перед тем, как появился язык стилей CSS, все иконки на сайтах представляли собой изображения. Но так как файлы изображений много весят, разработчики стремились найти один или несколько альтернативных способов отображения маленьких иконок. Например, CSS-спрайты позволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью этот способ не стал популярным способом отображения иконок — и в 2012 на смену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике — SVG (Scalable Vector Graphics).

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

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

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

Но, как и у CSS-спрайтов, иконочные шрифты имеют свои недостатки — например, для того, чтобы корректно их отобразить, браузеру приходится делать дополнительные запросы на сервер, что может привести к FOIT (Flash of Invisible Text) — ситуации, когда шрифт не отображается вообще. По этой и другим причинам многие разработчики делают выбор в пользу SVG.

Что такое SVG

SVG (Scalable Vector Graphics) позволяет отображать в браузере векторную графику. Формат SVG быстро стал новым стандартом для иконок и анимации. Они быстрее загружаются, прекрасно масштабируются и более надежные в использовании, чем иконочные шрифты. Векторная графика полностью стоит из кода и весит гораздо меньше, чем изображения в форматах JPG или PNG и большинство библиотек иконочных шрифтов.

Сравнение

Настало время сравнить SVG и иконочные шрифты по нескольким параметрам.

1. Размер

Если использовать встроенный SVG, то есть прописывать SVG в CSS, то код может стать тяжелым и громоздким. К тому же встроенный SVG код не кэшируется пользовательскими браузерами, в отличие от внешних SVG файлов. Поэтому если на определенной странице сайта много разных иконок, то иконочные шрифты будут предпочтительнее встроенных SVG изображений (но при условии, что вы не используете готовую библиотеку иконочных шрифтов).

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

2. Производительность

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

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

Можно собрать SVG файлы в отдельный внешний файл — и тогда его можно будет кэшировать.

Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.

3. Гибкость

Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

Иконочным шрифтам можно прописывать CSS-стили (тень, цвет и т.д.), их можно массово изменять при помощи одного правила в CSS, их можно анимировать.

4. Поддержка браузеров

Какой бы формат вы ни выбрали, его все равно нужно будет дорабатывать для того, чтобы обеспечить поддержку старых браузеров. Т.к. иконочные шрифты существуют дольше, чем SVG, то и поддержка у них шире — их увидят все, кто использует IE 6 и более новые версии.

С другой стороны, сейчас подавляющее большинство пользователей использует современные браузеры, так что на этот пункт сильного внимания обращать не стоит. Единственный нюанс, о котором стоит помнить — IE и Edge не всегда правильно масштабируют SVG файлы.

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

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

Вывод

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

Но все же сейчас чаще всего используют SVG — у этого языка разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами. Существует мнение, что один из трендов 2018 года — это уход от иконочных шрифтов к иконкам в формате SVG.

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

А что вы используете в разработке, SVG или иконочные шрифты?

Минусы и плюсы использования иконочных шрифтов

Существует два принципиально разных способа, добавления иконок на сайт:

• в виде картинки (растровой или векторной)
• в качестве иконочного шрифта

Разумеется, что у обоих вариантов есть свои недостатки и вообще не существует правильного способа, как вставить иконки на сайт. А есть подходящий способ, в зависимости от конкретной ситуации.

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

Браузерная интерпретация

Следует помнить, что иконочный шрифт – это всего лишь текст, который может выглядеть немного по разному (более или менее размытым) в зависимости от того, какой браузер использует пользователь. Кроме того, браузеры могут добавлять свои дефолтные значения у стилей, касаемые любых шрифтов, например line-height. Что в свою очередь сказывается на трудностях с позиционированием иконок. Мы, не можем быть уверенными, что иконка в макете, будет идентична на 100% той, что пользователь увидит на своем устройстве.

Одноцветные иконки

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

Анимация

Можно забыть про анимированные иконки.

Пустые теги и семантика

Обычно шрифтовые иконки вставляются в HTML разметку через пустые теги span и i. А сами иконки выводятся на страницу через псевдоэлементы after или before. Получается, что страница наполнена пустыми тегами. С точки зрения семантики, это не совсем хорошо.

Сложности на больших проектах

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

Ограниченный дизайн

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

Векторный формат

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

CSS оформление

Для иконок доступны все CSS стили, как и для обычных шрифтов. Большая гибкость в изменении цвета является бесспорным преимуществом.

Поддержка браузерами

У иконочного шрифта хорошая поддержка браузерами. Если большая доля посетителей просматривает сайт заказчика с IE7, тогда однозначно стоит использовать иконочный шрифт. Но мне трудно представить такую ситуацию, просто на грани фантастики.

Подключение сторонних библиотек (Font Awesome) – лишний HTTP-запрос к серверу, на который ругается Google PageSpeed при тесте на скорость загрузки сайта. Например, при использовании SVG иконок, не будет ни одного запроса к серверу. При условии, что SVG код иконок встроен в HTML разметку, а не вставляется картинкой в формате SVG.

Но с другой стороны, для загрузки всех иконок нужен только один HTTP-запрос. Посмотрите, как много может быть запросов к серверу, при добавлении картиночных иконок, непосредственно в HTML-код.

Выводы

Как видите минусов больше, чем плюсов. На текущий момент предпочтительнее применять SVG иконки. Только использование встроенных SVG иконок в HTML-документ не оказывает ощутимого влияния на скорость загрузки сайта и позволяет не терять качество иконок при масштабировании. Поскольку вектор выглядит одинаково при любых размерах экранов.

Узнайте в этом видеокурсе все мои секреты успешного ведения бизнеса по созданию сайтов на заказ.

• Создано 21.02.2020 10:01:09
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

10 Бесплатных ресурсов с иконочным шрифтом для веб-сайтов – Dobrovoimaster

Открытые исходные веб-шрифты позволяют дизайнерам кардинально менять дизайн страниц и типографские стили. Некоторые из этих веб-шрифтов используют наборы иконок, для переноса векторных значков в CSS.
Если вы ищете 100% бесплатные наборы шрифтовых иконок для своего веб-сайта, тогда эта статья для вас. В этом небольшом обзоре постарался собрать только лучшее, одни из самых популярных ресурсов, предоставляющих в свободный доступ отличные пакеты иконочных шрифтов.
Каждый набор иконок полностью совместим с SVG векторами и форматами webfont и отлично подойдёт для включения в ваши таблицы стилей, и непосредственно в веб-страницы.
 

1. Font Awesome

Начнём с одной из самых популярных среди большинства веб-дизайнеров библиотек иконочных шрифтов. Пакет Font Awesome существует уже много лет, и он по праву считается первым крупным набором шрифт-иконок с открытым исходным кодом. Библиотека обновляется довольно часто, пополняясь свежими иконками и в настоящее время находится в версии 4.7.0. Исходный код на GitHub в свободном доступе, открыт для скачивания без каких бы то ни было ограничений.
 

Скачать

2. Material Design Icons

С появлением концепции материального дизайна от Google, в web кардинально изменился подход к UI/UX, что привело к появлению множества новых фреймворков и ресурсов, в том числе и огромной библиотеки иконочных шрифтов в материальном дизайне.
Набор иконок полностью бесплатный и доступен для скачивания на GitHub. Этот пакет довольно массивный, содержит более 1000+ иконок, охватывающих широкий спектр функций интерфейса.
Поскольку исходный код открытый, вы можете использовать его в любых проектах без ограничений, а так же настраивать иконки, если это необходимо. Идеально подходит для тех, кто плотно работает с основными правилами материального дизайна Google в web.
 

Скачать

3. Captain Icon

Captain Icon, иконочный шрифт созданный дизайнером Марио дель Валле, для меня является фаворитом в числе веб-шрифтов. Это совершенно бесплатный проект с открытым исходным кодом, размещенный на GitHub, упакованный векторными файлами и веб-шрифтами. Что мне больше всего нравится в этом пакете иконок, — это оригинальный стиль. Каждая иконка имеет уникальный дизайн, и все они нарисованы, что называется с чистого листа, что ставит этот набор намного выше других более общих пакетов иконок. Но я не думаю, что Captain Icon одинаково хорошо подойдёт для каждого проекта. Как мне кажется, эти иконки лучше всего использовать на творческих сайтах, где рисованный стиль соответствует общему художественному дизайну.
 

Скачать

4. Typicons

Набор Typicons, иконки с закругленными углами и простыми контурами, идеально подойдёт для любого сайта. Пакет включает в себя 330 + уникальных иконок с оригинальным стилем.
Пакет полностью бесплатный и также доступен на GitHub. Скачав иконки, вы можете добавлять их непосредственно на ваш сайт и редактировать по мере необходимости.
Мало кто знает о Typicons, но это один из лучших доступных наборов шрифт-иконок, который может даже работать на iOS с небольшими корректировками и специальными фрагментами кода.
 

Скачать

5. Octicons

Недавно GitHub представил свой собственный пакет иконок под названием Octicons. Этот бесплатный набор в настоящее время находится в версии 5.0 и включает в себя десятки иконок с некоторыми основными символами используемыми в веб-дизайне.
Эти иконки можно найти разбросанными по всему сайту GitHub. Они достаточно просты и прекрасно впишутся практически в любой интерфейс.
Если вам нужны простые и легкие иконки, то обязательно присмотритесь к пакету Octicons.
 

Скачать

6. Zondicons

Zondicons абсолютно бесплатный и очень легкий набор иконок, который очень просто добавить на ваш сайт. К сожалению, пакет не размещён на GitHub, поэтому у него нет архива обновлений.
Но вы можете увидеть все примеры на демонстрационной странице, включая классы CSS, которые вам нужны, чтобы правильно включить их в работу. Основная ссылка на скачивание Zondicons идет прямо с веб-сайта разработчика, поэтому трудно сказать, были ли они когда-либо обновлены или добавлены новые иконки. Хотя на странице с иконками и указана дата последнего обновления: 19 Марта 2017.
 

Скачать

7. Entypo

Семейство шрифт-иконок Entypo существует уже несколько лет. Эти иконки превосходны и уверенно занимают верхние позиции среди бесплатных продуктов данной тематики. Новые иконки добавляются от не постоянно, но довольно часто, я бы сказал от случая к случаю, и находятся в открытом доступе. Шрифты разделены на две части: основной пакет и социальный пакет. Поэтому, если вам не нужны иконки для социальных сетей, вы можете немного уменьшить размер пакета. Entypo представлен с более чем 400 иконками в наборе. Чтобы узнать больше об установке и настройке иконок, прочитайте ответы на часто задаваемые вопросы FAQ (если шарите в буржуинском), ну, и конечно же посетите репозиторий проекта на GitHub.
 

Скачать

8. Devicons

Пакет Devicons — это один из новых веб-шрифтов с акцентом на технологические логотипы и брендинг. Уже сейчас вы можете смело его использовать на своих проектах.
Эти иконки представлены в виде логотипов, как крупных технических игроков веб-пространства, таких как Google, так и более новых логотипов CMS, например, таких как Ghost. Скорее всего, такой набор будет полезен только для сайтов, которые широко используют логотипы, например, различные рейтинговые каталоги и т.п. Большинству разработчиков достаточно будет лишь отдельные иконки из этого пакета.
Набор иконок абсолютно бесплатный! Информацию об установке вы найдете на этой странице, там же представлена свободная версией CDN, которую вы можете использовать для сокращения времени загрузки.
 

Скачать

9. Ionicons

Многим разработчикам уже давно хорошо знаком Ionic Framework, это один из самых популярных вариантов для разработки мобильных веб-приложений. В свою очередь команда Ionic решила выпустить свой набор иконок в виде веб-шрифта под названием Ionicons.
Естественно, иконки абсолютно бесплатны и доступны на GitHub. Вы так же можете добавить эти иконки прямо на ваш сайт, используя версию таблицы стилей CDN.
Я рекомендую Ionicons в основном для новичков, которые раньше не использовали знаковые шрифты, так как эти иконки очень просты в настройке, и как только вы поймете, как они работают, вы сможете перейти к использованию практически любых иконочных веб-шрифтов.
 

Скачать

10. MFG Labs

Ещё один из новых шрифтов в этом списке, принадлежит MFG Labs с собственным набором иконок. Набор полностью бесплатный и размещен на GitHub в свободном доступе.
Каждая иконка представлена с упакованными стандартными форматами webfont, использующими Unicode PUAs в CSS. Полностью семантический код с поддержкой во всех браузерах, что уменьшает вероятность конфликта с другим кодом CSS.
Посмотрите, иконки MFG Labs имеют свой уникальный стиль, который выделяется из общего ряда. Рекомендую этот набор иконок, для любого типа веб-сайтов, коммерческих, персональных блогов и других.
 

Скачать

Заключение

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Как создать набор иконок в формате шрифта

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon.io/).

Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.

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

Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.

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

Основный алгоритм действий по созданию шрифта в IcoMoon App

Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:

1. Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon. io/app/.
2. Ввести название проекта (значок «Manage Projects»).
3. Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
4. Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
5. Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
6. Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
7. Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
8. Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
9. Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «. icon».
10. Нажать на кнопку «Download».

Подключение иконок в формате шрифта к странице

Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».

По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».

Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».

<!-- path-to - путь до файла style.css -->
<link href="path-to/style.css" rel="stylesheet">

При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.

Использование иконок на странице

Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.

<!-- icon - базовый класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.

Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.

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

После подготовки векторных svg-изображений их можно с помощью сервиса IcoMoon собрать в иконочный шрифт.

Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.

Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.

Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):

<i></i>

Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.

Самые Лучшие Бесплатные И Платные Иконочные Шрифты

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

Ищете уникальные иконки для вашего сайта? Постоянно натыкаетесь на Font Awesome, но не находите на нём ничего интересного? Тогда обязательно прочитайте эту статью — здесь мы рассказываем, что такое иконочный шрифт, описываем множество бесплатных сайтов с ним, а также даём образцы иконок каждого сервиса. Сделайте свой выбор для создания уникального образа!

Лучшие альтернативы Font Awesome

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

Плюсы использования иконочных шрифтов 

• Их можно видоизменять любым образом: указать размер, цвет, фон, тень, градиент, применить псевдо-классы: hover или focus — чтобы создать свой собственный стиль.
• Их можно анимировать.
• Увеличение или уменьшение размера иконки не влияет на качество, поэтому они корректно отображаются даже на Retina-дисплеях.
• По сравнению с обычными изображениями, они меньше весят и быстрее загружаются.
• Для загрузки иконочных шрифтов нужен лишь один HTTP запрос, что может многократно увеличить скорость загрузки страниц на сайте.
• Они поддерживаются всеми браузерами (даже очень старыми версиями).

В настоящее время самым популярным шрифтом является Font Awesome. Он известен почти каждому, кто хоть раз занимался разработкой сайтов. Он изначально создавался под Bootstrap, но сейчас стал самостоятельной библиотекой значков и изображений, насчитывающей более 600 иконок.

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

Бесплатные наборы шрифтов

1. WebHostingHub Glyphs

Один из самых больших наборов иконок, он насчитывает 2075 картинок. Есть возможность скачивать их в формате PNG двух размеров (16 и 32 пикселя). Можно изменять цвет значков, их размеры, как и во многих других наборах иконок. На сайте даже есть наглядный пример, как это можно сделать: четыре ползунка рядом со случайной картинкой определяют её размер, цвет, тень и фокус тени.  

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

WebHostingHub Glyphs

2. Dashicons – The Official WordPress

Dassicons — это шрифт иконы, разработанный Mel Choyce, специально для того, чтобы набрать новый интерфейс Admin WP. Это отличная альтернатива Awesome Font, которая стоит проверить.

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

На данный момент библиотека Dashicons WordPress содержит 197 иконок, которые делятся на 15 разделов:

• Admin Menu;
• Welcome Screen;
• Post Formats;
• Media;
• Image Editing;
• TinyMCE;
• Posts Screen;
• Sorting;
• Social;
• WordPress. org Specific: Jobs, Profiles, WordCamps;
• Products;
• Taxonomies;
• Widgets;
• Notifications;
• Misc.

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

На официальном сайте вы увидите вот такой интерфейс. При нажатии на понравившийся значок он появится в хидере рядом с его ссылками в нескольких форматах: CSS, HTML и Glyph.Dashicons – The Official WordPress

3. Ionicons

Эта альтернатива Font Awesome представляет 528 разнообразных иконок, которые подойдут для различных меню, внутренних списков и вкладок. Девиз компании гласит: Изготовлено с любовью вручную. В это можно поверить, обратив внимание, с какой детализацией выполнены эти значки. 

Ionicons выпускают свои иконки для использования в мобильных приложениях на IOS, Android, веб-приложениях и настольных ПК. Они имеют открытый код, который сильно облегчают работу по оформлению сайта. Как это выглядит, показано на скриншоте ниже.

Ionicons — продукт компании Ionic, которая создаёт не только значки для сайтов, но и предлагает пользователям целый набор удобных для разработчиков сайтов продуктов. Они позволят Вам создавать, защищать и доставлять приложения корпоративного уровня на любой платформе.  

Ionicons

4. Стандартные символы HTML

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

Все иконки выполнены толстой линией, а код открыт для каждого. По нашему мнению, стандартные символы HTML — замечательная альтернатива Font Awesome.

Стандартные символы HTML

Стандартные символы HTML

5. Linea Iconset

Linea Iconset имеет в своём ассортименте 716 значков, с помощью которых можно наладить лучший контакт с пользователем, ведь в современном мире много слов и текста ни к чему. Данный сайт предлагает скачать целым паком сборник иконок по направлениям, например, Музыка, Электронная торговля и другие. Сами иконки выглядят как линии, образующие рисунок того или иного значения.

Кроме этого, официальный сайт Linea Iconset предлагает Вам ещё десяток сайтов, где можно найти бесплатные иконки для веб-разработки. Их мы не будем перечислять именно по этой причине.

Linea Iconset

6. Android Icons

Прекрасный добрый сервис, встречающий гостей большим сердцем и благодарностью. В своей библиотеке имеет 250 символов, которые можно использовать абсолютно бесплатно — ведь Android Icons имеет открытый код, — а с помощью CSS их можно изменять: менять размеры, формы, цвета. 

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

Android Icons

7. Themify Icons

Этот сервис предлагает полный набор значков для использования в веб-дизайне и приложениях. Все 320 иконок поделены на группы, такие как Стрелки направления, Иконки веб-приложений, Текстовый редактор и другие. 

Themify Icons работает на обеспечении WordPress, так что их значки можно легко использовать на любой теме WordPress: для добавления в меню, заголовок виджета или других. 

Themify Icons

8. StackIcons

Хоть сайт и предлагает немного вариантов иконок (всего 60), они очень яркие и красочные, а также легко меняют цвет, объем, объединяются с другими символами, размер может увеличиваться или уменьшаться без потери качества изображения. Иконки идеально подходят до большинства современных социальных брендов: от App.net до Zerply. Для внутренних ссылок контактов компании StackIcons подходит как никто другой.

StackIcons

9. GitHub’s Octicons

Эти значки делиться на два формата: 16 и 24 пикселя. Несмотря на то, что в этих списках представлены разные иконки, каждый из них можно представить в большем или меньшем виде. Всего библиотека сайта насчитывает около 250 изображений, зашифрованных в текстовые файлы.

GitHub’s Octicons создаёт свои уникальные иконки с открытым кодом, позволяя пользователю копировать или скачать код в формате SVG, а также Ruby, Jekyll и React. 

GitHub’s Octicons

10. Material Design Iconic Font

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

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

Material Design Iconic Font

Платные шрифты

1.

Сервис имеет в своих хранилищах более 1600 иконок, и предлагает попробовать бесплатную версию, включающую в себя лишь 490 образцов. За полный пакет услуг с премиум-условиями, с множеством векторных форматов и фигурами Photoshop, сайт просит 59$. Эти деньги находятся на двухнедельной гарантии.

Салат из Баклажан и…

Please enable JavaScript

Салат из Баклажан и Картофеля Без Майонеза По Китайски!

Конечно, вы можете видоизменять купленные наборы иконок по своему желанию. Здесь вы сможете создать свой уникальный стиль, не прикладывая много усилий.

IcoMoon

2. Streamline 

Данный сервис представляет более 75000 (!) разнообразных иконок. Они поражают своей необычностью, яркостью и разнообразием настолько, что влюбляешься в них с первого взгляда. 

Streamline Icons — один из немногих сервисов, позволяющий работать с Sketch, благодаря чему можно изменять цвет иконок и толщину их линий. На сайте каждый образец представлен в трёх видах: Light, Regular и Bold. Streamline имеет пробную бесплатную версию, но также предлагает приобрести платные пакеты услуг. Например, сразу весь набор значков можно приобрести за 228$ в год. С этим пакетом идут векторные файлы в формате SVG и PDF, высокое разрешение изображения, право на пользование продукцией без указания автора. 

Streamline

3. Flaticon 

«Флаги стран», «Социальные Медиа», «Бизнес Аналитика» — только малая часть непопулярных разделов символов на этом сервисе. Необычные иконки насчитывают невообразимые 108 683 набора, созданные профессиональными дизайнерами и простыми пользователями. Вы тоже можете создать свой собственный набор иконок и продать его на этом же сайте.

Формат файлов тоже разнообразен: PNG, PSD, SVG, EPS, и BASE 64. Вы можете легко импортировать значки в Illustrator, After Effects и Photoshop.

Премиум пакет стоит 40,50 € в месяц, и даёт доступ к эксклюзивным иллюстрациям, полному праву в части лицензирования, а также убирает рекламу. Бесплатные образцы тоже есть, и их неожиданно много для одного сайта: более 2 миллионов. Ежемесячно создатели добавляют новые иконки, так что коллекция не ограничена этой цифрой.

Flaticon

4. Smashicons 

Smashicons всего за 5$ в месяц открывает доступ ко всем уже имеющимся иконкам, а также к тем, что будут добавлены в будущем. Все иконки представлены в виде редактируемых векторов в двух форматах: PNG и SVG. Постоянно добавляются новые иконки, а также появились открытые ресурсы для дизайна. Smashicons предлагает вам 174 ресурса для Ваших творческих проектов. 

Smashicons

Заключение

В интернете можно легко найти множество сервисов, которые бесплатно или платно дают всем желающим тысячи красивых иконок. С их помощью можно оформить сайт или страницу в социальной сети. Альтернативы Font Awesome много, но, к сожалению, русскоязычных сайтов мало. Хотя даже без перевода понятно, как найти нужный значок и код для него. Font Awesome — не единственный сервис, достойный внимания, и с каждым днём появляется всё больше новых сайтов с уникальными изображениями. 

  PDF: Самые Лучшие Бесплатные И Платные Иконочные Шрифты — Альтернативы Font Awesome

⏧ Альтернатива Font Awesome,  ⏧ альтернативы Font Awesome,  ⏧ Шрифты веб-иконок,  ⏧ лучший иконочный шрифт для веб-сайта

50 лучших бесплатных шрифтов Icon для дизайна пользовательского интерфейса

Хотя шрифты Icon очень популярны, у них есть и свои подводные камни. Ян Фезер рассказал о причинах своего перехода с иконочного шрифта на SVG, а CSS Tricks изложил некоторые соображения при выборе между системой иконочных шрифтов и SVG.

Оба явно поддерживают SVG. В качестве контраргумента Pictonic заявила, что иконочные шрифты на 10% быстрее, чем SVG. Это просто вещи, которые вы должны учитывать, прежде чем использовать иконочные шрифты.

Чтобы убедиться, что ваши значки всегда загружаются правильно и имеют надежные запасные варианты для браузеров, которые не поддерживают @fontface , вам следует ознакомиться с рекомендациями, изложенными Filament Group , Bulletproof Accessible Icon Fonts.

Другие бесплатные наборы иконок

The Icon & UI Designer Toolbox

Неограниченное количество загрузок: более 1 000 000 наборов иконок, наборов пользовательского интерфейса, каркасных шаблонов, тем, плагинов и многого другого!

Иконки Magicons

Наборы иконок

Иконки для веб-разработки

Наборы иконок

Набор для веб-дизайна и разработки

Наборы иконок

Исследуйте более 28 000 наборов иконок

Если вы разрабатываете новый интерфейс или хотите продемонстрировать возможности своего продукта, обратите внимание на этот великолепный (и бесплатный) иконочный шрифт. Эти значки с открытым исходным кодом содержат действия и элементы, от стрелок и вложений до цветовых палитр. С более чем 480 иконками, это целый пакет!

Ничто так не подчеркивает качество вашего продукта, как минимализм, и этот набор значков — отличный выбор для вашего следующего проекта. Они векторные и полностью редактируются в Adobe Illustrator. От значков частоты до красивых значков переключения контуров — у вас будет все, что вам нужно!

Перестаньте беспокоиться о том, чтобы ваши значки работали с форматированием текста. Этот набор значков с открытым исходным кодом включает более 230 практичных и технических значков в различных форматах, от SVG до WOFF. Вы можете быстро изменить их размер в соответствии с вашими потребностями с помощью CSS, и они прекрасно читаются даже при разрешении 8 пикселей.

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

Ionicons — это универсальный набор иконок для платформы Ionic. Вы получите множество значков приложений (уведомления, стрелки, еда и многое другое), а также значки с логотипами известных брендов (например, Pinterest). В зависимости от ваших потребностей вы можете загружать контурные, заполненные и/или четкие изображения значков в виде файлов SVG и веб-шрифтов.

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

Font Awesome — это массивный и очень популярный набор иконок. Они предлагают более 1600 бесплатных иконок, каждая из которых была тщательно разработана, чтобы продемонстрировать удобство и простоту использования. В галерее FA вы найдете все, от логотипов AWS и других брендов до значков бизнеса и образа жизни.

Шрифты Wirebet — отличный выбор, если вы хотите упростить рабочий процесс и интегрировать привлекательные значки в свои материалы, не загружая набор инструментов для дизайна. Вы получите различные технические значки, от символов для страниц портфолио до стрелок и значков устройств. Wirebet идеально подходит для вайрфреймов!

Добавляйте современные значки линий к своим материалам одной строкой кода с помощью Line Awesome. Он улучшает предложение Font Awesome и позволяет добавлять все виды значков (от доступности и построения до стрелок и значков брендов) на ваш веб-сайт (через CDN), прототипы Figma и многое другое.

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

Dashicons — это иконочный шрифт для WordPress. Если вы хотите подражать фирменному стилю WP в других проектах, вам это понравится. Это очень техничный стиль, но он передает суть и прост в использовании. От логотипов брендов до TinyMCE — бегите!

Remix Icon — это библиотека значков с открытым исходным кодом, содержащая более 2200 значков. Все иконки бесплатны как для личного, так и для коммерческого использования. Вы увидите широкий спектр значков, от значков с тонкими контурами до заполненных символов для дополнительного выделения. Получите их в формате PNG, SVG или код.

Вдохновленные Apple iOS, значки Themify предлагают более 300 красивых минималистичных значков. От стрелок до значков приложений, вы получите все, что вам нужно, в виде шрифта значков для упрощения интеграции рабочего процесса (включая SVG) или плагина для WordPress. Иконки Themify идеально подходят для современного дизайна пользовательского интерфейса!

Если вам не нужны стандартные значки линий, попробуйте Dripicons. Этот бесплатный иконочный шрифт невероятно прост в использовании, но лучше всего то, что он прекрасен! Вы получите набор универсальных жирных значков, от стрелок и технологий до образования и музыки.

Если вам нравится эстетика GitHub, вам понравятся их Octicons. Эти значки доступны в двух размерах (16 пикселей и 24 пикселя), а также включают в себя некоторые специальные значки, такие как запросы на вытягивание. Вы можете переключаться между контурными и заполненными значками, и они отлично работают с разными языками программирования.

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

Devicons — это иконочный шрифт, созданный специально для разработчиков и самых разных проектов. Шрифт содержит 85 значков, в основном логотипы брендов для таких сервисов, как Dropbox и платформ кодирования, таких как PostgreSQL. Devicons можно интегрировать, добавив одну строку кода в HTML-шапку проекта.

Красивый, элегантный и привлекательный — этот иконочный шрифт содержит более 300 разнообразных иконок. Их легко интегрировать и использовать, особенно если вы использовали Elegant Themes или конструктор Divi в прошлом. В этом наборе вы найдете все, от значков файлов до стрелок.

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

Простой, удобный и идеально подходящий для самых разных проектов Typicons — отличный выбор. Они встроены в веб-шрифт, поэтому их легко использовать. Вы получите 336 значков, от шестеренок и стрелок до логотипов брендов. Вы можете выбирать между заполненными значками или контурами.

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

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

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

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

Прямо из мастерской Pixeden Stroke 7 представляет собой набор иконок с тонкими линиями. Набор предлагает более 200 иконок, которые можно настроить с помощью CSS. Они были вдохновлены иконками начала 00-х, поэтому они не будут выделяться и отвлекать внимание от вашего основного сообщения.

Петрас Наргела разработал набор из 80 иконок, и это бесплатно. Эти красивые значки свежие, чистые и готовы оживить ваш дизайн. Вы можете загрузить их в виде файлов PSD, AI или веб-шрифтов. Если вам нужно что-то другое, вы его нашли!

Созданный Google набор значков Material Design содержит множество значков, которые вы можете использовать в своих проектах. Вам просто нужно добавить одну строку кода на свой сайт, и все готово! Поскольку участники сообщества постоянно добавляют свои собственные значки, существует множество вариантов.

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

Tonicons — фантастический набор иконочных шрифтов, которые не только просты в использовании, но и красивы! Вы получите 300 чистых и минималистичных иконок для дизайна приложений и веб-интерфейса. От всех видов файлов до значков обмена сообщениями, набор Tonicons охватывает все варианты использования.

Иконки Metrize предлагают вам 300 иконок в стиле метро, ​​которые усилят ваш следующий проект. Вы можете использовать их для приложений и веб-сайтов, и все это очень просто, поскольку они также доступны в виде веб-шрифта. От логотипов брендов до стрелок — Metrize поможет вам!

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

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

Ligature Symbols — это иконочный шрифт с забавными и минималистичными иконками. Отдельные значки можно комбинировать для создания лигатур (например, объединять значки таблиц и ячеек для создания сеток), повышая удобство использования этой коллекции. Вы найдете все, что вам нужно, так что попробуйте этот бесплатный иконочный шрифт!

Девиконы — это понятные, удобные для разработчиков значки, созданные для обозначения инструментов программирования и разработки. От Chrome и Confluence до Django и Adobe Illustrator — вы найдете иконку, которую искали. Вы можете легко копировать и вставлять их в свои проекты, используя либо версии шрифтов, либо версии SVG.

Простые и лаконичные, эти мини-значки идеально подходят для самых разных проектов, особенно более формальных по тону. Эта коллекция иконок содержит 80 точно сделанных иконок как в формате PSD, так и в формате иконочного шрифта. В этом наборе есть все, что вам нужно, от символов загрузки/выгрузки до значков местоположения и погоды!

Набор иконок Helium от Тараса Шипки предлагает множество иконок. Они не только доступны во всех мыслимых форматах, но вы также можете использовать их в качестве иконочного шрифта. Вы получите 112 значков с тонкими линиями, которые придают блеск. Гелий однозначно выбор эстета!

Набор Gonzocons, разработанный Яном Райторалом, предлагает 100 линейных иконок, которые идеально повторяют современные тенденции дизайна иконок. От простых стрелок до жизнерадостных сердец и песочных часов — у иконок Гонзоконов определенно есть индивидуальность. Вы можете получить их в виде файлов SVG или в виде веб-шрифта для упрощения интеграции с вашим приложением/сайтом.

Map Icons — это иконочный шрифт, созданный для Google Maps и Places. Вы можете легко настроить значки с помощью CSS и выбрать из более чем 175 значков. От общих значков для парикмахерских до значков для мероприятий, этот набор дает вам большой выбор, чтобы сделать ваш следующий проект потрясающим.

Этот простой и увлекательный набор состоит из 150 контурных значков. Вы можете получить их в виде файлов PSD, AI, SVG или веб-шрифтов. Иконки Дарио Феррандо вдохновлены современным дизайном веб-иконок, но они обладают достаточной индивидуальностью, чтобы сделать ваш следующий проект выдающимся и поразить вашу аудиторию.

Стреляйте в луну с помощью этих красивых космических значков. Вы получите более 230 символов, включая космические корабли, планеты и многое другое! Их очень легко использовать, так как это шрифт dingbat, и если вы начнете вводить цифры, вы найдете всю солнечную систему.

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

Получите более 40 минималистичных и удобных значков погоды с помощью Meteocons. Этот набор предлагает все мыслимые форматы, от SVG до настольных и веб-шрифтов. Их можно использовать бесплатно в личных и коммерческих целях, и вы даже можете создать свой собственный шрифт с часто используемыми значками. Обновления значков тоже бесплатны!

Добавьте красок своим проектам с помощью Stackicons, коллекции из более чем 60 обновленных иконок с логотипами брендов, от Dribbble до Reddit. Они добавят индивидуальности вашему стандартному дизайнерскому комплекту. Вы можете выбрать обычные значки, различные закругленные вариации или квадратные значки, и каждый найдет что-то для себя!

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

Привлекательный и динамичный Mono Social — это иконки социальных сетей с забавным характером. Вы можете использовать их бесплатно и выбрать один из трех вариантов представления (круглый, круговой, обычный) в соответствии с вашим стилем. Используйте их с CSS, HTML и SCSS. Они бесплатны для личного и коммерческого использования.

Созданный Джелио Димитровым, Socialico представляет собой набор из 74 ярких и привлекательных значков социальных сетей. Они упакованы как веб-шрифты, поэтому каждый символ на вашей клавиатуре создает красивую иконку с множеством вариантов представления. Поскольку эти значки шрифтов бесплатны, добавьте их в свой набор инструментов!

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

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: более 1 500 000 иконок и элементов дизайна

1. Значок капитана

Мой любимый веб-шрифт — набор Captain Icon, созданный дизайнером Марио дель Валье. Это абсолютно бесплатный проект с открытым исходным кодом, размещенный на GitHub, с векторными файлами и веб-шрифтами.

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

Но я не думаю, что Captain Icon подходит для каждого проекта. Его лучше всего использовать на творческих сайтах, где рисованный стиль подходит к макету.

2. Октиконы

GitHub недавно открыл свой собственный набор иконок под названием Octicons. Этот бесплатный набор значков в настоящее время находится в версии 5.0 и включает в себя десятки значков с некоторыми основными символами.

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

Если вам нужен простой, легкий иконочный шрифт, Octicons вас не подведет.

3. Типиконы

Благодаря закругленным углам и более простым контурам набор Typicons идеально подходит для любого сайта. Он поставляется с более чем 330 уникальными иконками в едином стиле.

Пакет полностью бесплатный и доступен на GitHub. Это означает, что вы можете добавлять значки непосредственно на свой сайт и даже вносить в них изменения по мере необходимости.

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

4. Зондиконы

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

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

Я рекомендую этот веб-шрифт, если вас устраивает более простой дизайн. Это делает значки намного проще в использовании, но они также могут гармонировать с сайтом в более «общем» стиле.

5. Опечатка

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

Новые значки добавляются спорадически, и к ним очень легко получить доступ. Шрифты также разделены на два пакета: основной пакет и социальный пакет. Поэтому, если вам не нужны значки социальных сетей, вы можете немного уменьшить размер файла шрифта.

Entypo поставляется с более чем 400 иконками и блестящей лицензией CC. Чтобы узнать больше об установке и настройке значков, прочитайте страницу часто задаваемых вопросов и посетите основной репозиторий GitHub.

6. Лаборатория MFG

Один из новых шрифтов в этом списке создан MFG Labs с собственным набором значков. Это абсолютно бесплатно и размещено на GitHub для доступа во всем мире.

Каждый значок упакован со стандартными форматами веб-шрифтов с использованием Unicode PUA в CSS. Это полностью семантично во всех браузерах и помогает уменьшить конфликты с другим кодом CSS.

значка MFG Labs имеют уникальный стиль, который выделяется из общей массы. Я абсолютно рекомендую этот иконочный шрифт для любого типа веб-сайта, коммерческого или любого другого.

7. Иониконы

Нативным разработчикам нравится Ionic Framework, и это один из самых популярных вариантов для мобильных приложений из Интернета. Команда Ionic решила выпустить свои иконки в виде веб-шрифта под названием Ionicons.

Естественно, они абсолютно бесплатны и доступны на GitHub. Вы даже можете добавить эти значки прямо на свой сайт, используя версию таблицы стилей CDN.

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

8. Потрясающий шрифт

Оригинальный веб-шрифт и личный выбор Bootstrap, Font Awesome, возможно, является окончательным выбором для большинства веб-дизайнеров.

Font Awesome существует уже много лет и широко известен как первый крупный иконочный шрифт с открытым исходным кодом. Он часто получает новые обновления со свежими значками, и в настоящее время он находится в версии 4.7, которую можно бесплатно загрузить на GitHub.

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

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

9. Иконки дизайна материалов

Материальный дизайн Google привнес новый подход к UI/UX в Интернете. Это привело к появлению множества новых фреймворков и ресурсов, включая этот иконочный шрифт для дизайна материалов.

Эти значки материалов абсолютно бесплатны и доступны на GitHub. Этот пакет значков абсолютно огромен: из более чем 1000 значков , охватывающих широкий спектр функций интерфейса.

А поскольку это открытый исходный код, вы можете свободно использовать их в любых проектах и ​​даже настраивать значки, если это необходимо. Идеально подходит для тех, кто работает с руководящими принципами материалов Google в Интернете.

10. Девиконы

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

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

Но это здоровенный набор иконок, и он совершенно бесплатный! Подробную информацию об установке вы найдете на этой странице с бесплатной версией CDN, которую вы можете использовать для сокращения времени загрузки.

Подведение итогов

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

Этот пост может содержать партнерские ссылки. См. нашу информацию о партнерских ссылках здесь .

15+ лучших иконок для веб-дизайна и пользовательского интерфейса (бесплатно + премиум)

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

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

Однако поиск подходящего шрифта для значков, подходящего для ваших дизайнерских проектов, может оказаться сложной задачей. Мы хотим сделать этот процесс намного проще. Начните с просмотра нашей отобранной коллекции бесплатных и премиальных шрифтов значков (и обязательно ознакомьтесь с нашими советами по выбору шрифта значков, которые помогут вам начать работу!)

800+ дизайнерских шаблонов веб-сайтов + конструктор с функцией перетаскивания

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

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

Адаптивный дизайн

Интеллектуальная аналитика

Социальные инструменты

Полная свобода дизайна

Инструменты для брендинга и логотипов

Потрясающие шаблоны

Создайте свой сайт бесплатно

Icofont — самый креативный иконочный шрифт, который вы можете скачать и использовать на 100% бесплатно. Этот шрифт включает в себя более 2100 значков в 30 различных категориях, таких как валюта, социальные сети, фирменные логотипы и многое другое. Одним из преимуществ использования этого пакета является то, что он доступен как в формате SVG, так и в виде иконочного шрифта.

Font Awesome — самый популярный в Интернете иконочный шрифт, содержащий более 7000 иконок. Его использовали более 100 миллионов веб-сайтов, включая такие бренды, как McDonalds и Йельский университет. Он содержит множество полезных функций. Самостоятельное размещение пакета значков — идеальный способ его использования, поскольку облачные планы имеют ограничения на использование.

Ionicons — это еще один набор креативных иконок с минимальным и простым дизайном. Этот иконочный шрифт создан специально для веб-дизайна и дизайна мобильного пользовательского интерфейса и совместим с платформами iOS и Android. Он имеет в общей сложности более 1100 иконок. Он находится под лицензией MIT с открытым исходным кодом 9.0003

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

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

Значки погоды часто используются во многих различных типах веб-дизайна и дизайна пользовательского интерфейса, особенно в мобильных пользовательских интерфейсах. С этим пакетом вы можете выбрать одну из 42 уникальных иконок, связанных с погодой. Значки также доступны в форматах AI, PSD, SVG и шрифтов значков.

Подобно предыдущему набору иконочных шрифтов, этот пакет содержит набор минимальных линейных значков. Он также включает 32 стильных значка погоды в различных форматах, включая AI, SVG, EPS и шрифты значков. Чистый и простой дизайн делает эти значки подходящими для всех типов делового и профессионального дизайна.

Fontisto — еще один отличный бесплатный шрифт с набором современных и стильных значков в нескольких категориях. Значки полностью масштабируются и отлично смотрятся на дисплеях Retina. Его также можно использовать в коммерческих проектах совершенно бесплатно.

Dripicons — это коллекция линейных иконок с гладким минималистичным дизайном. Иконки имеют современные макеты, которые подходят как для веб-дизайна, так и для мобильного пользовательского интерфейса. Его также можно бесплатно использовать в коммерческих проектах.

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

Если вы любите значки линий, этот набор современных значков линий идеально вам подойдет. Он содержит более 300 иконок. Значки доступны в форматах AI, SVG, PSD, а также включают версию шрифта значков для цифрового дизайна.

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

Набор из 200 уникальных иконок, созданных специально для дизайна, связанного с образованием. Этот набор иконок поставляется в форматах файлов EPS, AI и SVG. Версия иконочного шрифта также включена для веб-дизайна и дизайна пользовательского интерфейса для мобильных устройств.

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

Captain Icon — это современный иконочный шрифт с более чем 350 уникальными дизайнами иконок. Иконки идеально подходят для создания как веб-интерфейсов, так и мобильных пользовательских интерфейсов. Иконки представлены в нескольких форматах, включая EPS, SVG, PSD и версии шрифтов значков.

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

Entypo — это бесплатный иконочный шрифт с минимальным и чистым дизайном. Этот пакет включает в себя более 400 иконок. Несмотря на то, что шрифт давно не обновлялся, иконки актуальны и сегодня.

Этот бесплатный иконочный шрифт от Pixelden содержит 200 уникальных иконок с тонкими линиями. Каждый значок имеет дизайн, вдохновленный iOS 7. Этот шрифт значка больше всего подходит для дизайна веб-сайтов и веб-приложений.

5 советов по выбору шрифта значка

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

1. Иконки SVG и шрифты иконок

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

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

2. Убедитесь, что он отзывчивый

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

Хотя не помешает перепроверить, чтобы значки реагировали, особенно если вы используете SVG-версию значков.

3. Выберите подходящие темы

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

4. Цвета и персонализация

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

5. Бесплатные и премиальные шрифты значков

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

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

20 лучших бесплатных иконок для дизайна пользовательского интерфейса

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

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

спонсируемое сообщение

Вздох… хорошо тогда. Когда вы дизайнер, наличие ресурсов и шрифтов под рукой может помочь вам выполнять свои проекты намного быстрее. Чтобы помочь вам, мы проделали за вас всю работу и составили список из 20 лучших бесплатных иконочных шрифтов для дизайна пользовательского интерфейса, чтобы вы могли создать набор ресурсов, который сможете использовать долгие годы.

Итак, если вы готовы начать, давайте читать дальше!

Иконочные шрифты — это шрифты, содержащие символы и глифы, а не буквы или цифры. Они довольно популярны среди веб-дизайнеров. В этом посте мы перечисляем некоторые из лучших иконочных шрифтов для дизайна пользовательского интерфейса. Хорошо то, что все эти иконочные шрифты доступны бесплатно. Да, вы правильно прочитали! Дамы и господа, вот 20 лучших бесплатных шрифтов для дизайна пользовательского интерфейса.

• Trendy Thin Line Icons для Интернета и мобильных устройств Набор
• Иконки Themify
• Pictypo
• Значок ремикса
• Значки векторных линий и шрифт
• Шрифты Wirebet
• Зондикон
• Шрифты Foundation Icon 3
• Иконки Linea
• Каркасные значки
• Микрон
• Коллекция шрифтов Crafty (24 шрифта)
• 77 основных значков
• Шрифт Line Flat + значок плоской линии
• 80 мини-иконок (PSD + шрифт значка)
• 150 контурных значков — PSD AI SVG Webfont
• Значки погоды
• Бесплатный шрифт Icon
• Значок подписи
• Набор иконок MFG Labs

ЛУЧШИЕ БЕСПЛАТНЫЕ ШРИФТЫ ICON – НЕОГРАНИЧЕННОЕ ЗАГРУЗКИ: 50+ миллионов шрифтов и элементов дизайна

спонсорское сообщение

Загрузите все бесплатных иконок , которые вам нужны, и многие другие элементы дизайна, доступные по ежемесячной подписке, подписавшись на Envato Elements . Подписка стоит 16,50 долларов в месяц и дает вам неограниченный доступ к огромной и растущей библиотеке из более чем 50 миллионов элементов, которые можно загружать так часто, как вам нужно (эффекты и наборы элементов тоже)!

Набор иконок Trendy Thin Line для Интернета и мобильных устройств, набор

Хотите ли вы создать значки, календари, этикетки, упаковку или любой другой дизайн — шрифт Trendy Thin Line Icon Kit для Интернета и мобильных устройств от fet — лучший вариант, который идеально подходит практически для любого модного дизайна. 100% векторный шрифт, полностью редактируемый в Adobe Illustrator. Еще одна интересная особенность этого шрифта — все элементы шрифта многослойны и хорошо организованы.

Загрузить сейчас

Иконки Themify

рекламное сообщение

Вдохновленный Apple iOS 7, Themify состоит из более чем 320 пиксельных иконок ручной работы. Идеально подходит для использования в веб-дизайне и приложениях, Themify поставляется с широким набором значков и является обязательным инструментом для веб-дизайнеров и разработчиков. Если вы ищете значки, которые идеально подходят для любого проекта, личного или коммерческого, вам следует обратить внимание на значки от Themify.

Загрузить сейчас

Pictypo

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

Загрузить сейчас

Система с нейтральным стилем с открытым исходным кодом Remix Icon — идеальный шрифт для дизайнеров и разработчиков, который может использовать их в дизайне пользовательского интерфейса. Состоящая из более чем 2200 иконок, каждая из них была идеально обработана с учетом согласованности, удобочитаемости и идеальных пикселей. Иконки, созданные Remix Design, оформлены в виде контуров и заполнены стилями на сетке. Универсальность Remix Icons позволяет вам использовать его по своему усмотрению для всех ваших личных и коммерческих нужд.

Загрузить сейчас

Иногда хорошо иметь слишком много чего-то. Набор значков векторных линий и шрифтов содержит 130 значков векторных линий, совместимых с Affinity, Affinity Designer и Adobe Illustrator, и предоставляет варианты в различных форматах, включая AI, PDF, EPS, AFDESIGN и SVG. Вы также получаете пакет шрифтов значков, который включает файлы TTF, SVG, EOT и WOFF.

Загрузить сейчас

спонсируемое сообщение

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

Загрузить сейчас

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

Загрузить сейчас

С пользовательской коллекцией из более чем 275 значков набор Foundation Icon Fonts 3, разработанный ZURB, позволяет вам настраивать размер, цвет и даже стиль с помощью CSS. Набор, хранящийся в удобном веб-шрифте, является прекрасным примером чистой геометрии. Во многом это связано с тем, что каждая иконка была создана в общих формах, таких как треугольники, квадраты, круги и прямоугольники. Благодаря таким функциям, как закругленные углы, толстая толщина линий, а также полная масштабируемость, которая позволяет использовать его как в малых, так и в больших размерах, набор Fonts 3 идеально подходит для любого проекта

Загрузить сейчас

Набор Linea Icon включает такие категории, как основные, музыкальные и другие значки, всего более 750 значков, которые вы можете использовать в своих проектах. Набор включает значки во многих различных форматах, включая SVG, шрифт значков и PNG64.

Загрузить сейчас

Набор иконок каркасов, состоящий из более чем 200 значков линий, является идеальным вариантом для создания каркасов. Совместимый с Adobe Photoshop, Illustrator и другими, набор включает значки в форматах AI, PDF, PSD и SVG, любой из которых может идеально подойти для любого проекта, над которым вы работаете.

Загрузить сейчас

Microns

Разработанный специально для пользовательского интерфейса и состоящий из более чем 100 значков, набор Microns содержит все основные стили глифов, которые, вероятно, будут использоваться почти в 99% проектов. Каждая иконка в этом шрифте разработана с максимальной согласованностью и построена на сетке из 512 единиц и разделена на ячейки 16×16. Его лигатуры придают уникальность и работают в обоих направлениях. Вы также получите шпаргалку, которую можно использовать для быстрой справки.

Загрузить сейчас

77 Essential Icons

Этот шрифт, разработанный Брином Тейлором, поставляется с набором из 77 бесплатных основных значков. Вы можете найти иконки в форматах AI, PDF, PSD, PNG и SVG. При использовании шрифта вы можете легко изменить цвет любого значка. Этот точный шрифт с идеальной точностью до пикселя поставляется с бесконечно масштабируемыми векторами, которые можно использовать для любых личных и коммерческих целей.

Загрузить сейчас

Шрифт Line Flat + плоский значок линии

Этот изящно стилизованный шрифт, созданный в соответствии с идеей линейного стиля, может быть оптимизирован для оформления витрин и постеров. Отличный вариант для использования в плакатах, открытках и этикетках, шрифт идеально подходит практически для любой инфографики и линейных значков. Шрифт поставляется с набором из 26 иконок, связанных с бизнес-темами и многим другим. PSD-файл поставляется с прозрачным фоном и многоуровневыми смарт-объектами, которые можно легко редактировать в Illustrator всего двумя щелчками мыши.

Загрузить сейчас

Коллекция шрифтов Crafty (24 шрифта)

Шрифт Crafty относится к семейству шрифтов без засечек. Он имеет обычный моноширинный, сжатый и расширенный интервалы и, таким образом, идеально подходит для использования в различных проектах. Он имеет коллекцию из 24 шрифтов, таких как обычный, контурный, в горошек, шеврон, каракули, звезды и другие, которые вы можете оптимизировать для любого размера. Совместим со многими приложениями, включая Photoshop, Illustrator и даже Microsoft Word.

Загрузить сейчас

80 мини-иконок (PSD + шрифт значка)

Доступный в форматах PSD и Icon Font, набор из 80 мини-иконок был создан шведским дизайнером Виктором Эриксоном и состоит из 80-пиксельных идеальных мини-иконок, которые вы можете можно использовать в любом дизайн-проекте, в том числе связанном с пользовательским интерфейсом.

Загрузить сейчас

150 контурных значков — PSD AI SVG Webfont

Созданный Дарио Фернандо, 150 контурных значков — PSD AI SVG Webfont — это простой, но полезный набор значков, включающий форматы PSD, AI, нарезанные SVG. Если вы ищете идеальную иконку для веб-сайта, вам стоит обратить внимание на этот шрифт.

Загрузить сейчас

Значки погоды

Состоящий из более чем 200 значков с погодной тематикой, шрифтом и стилями CSS, шрифт Weather Icons был создан для проектов, связанных с погодой. Если вашему проекту нужны высококачественные значки погоды, морские значки или метеорологические значки, это лучший вариант практически для любой темы погоды. Предлагает встроенный API, который совместим с Yahoo Weather, Всемирной метеорологической организацией, OpenWeatherMaps и другими популярными погодными приложениями.

Специальные значки в этом наборе значков включают около 28 фаз луны и 12 часов. Значки поставляются с файлами OTT и TTF, которые можно легко использовать в дизайнерских приложениях, таких как Photoshop, Illustrator и Sketch. Еще одной интересной особенностью этого шрифта является свобода использования его стиля CSS, который помогает масштабировать, поворачивать, переворачивать, добавлять тени и даже изменять цвета значков.

Загрузить сейчас

Шрифт Free Icon

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

Загрузить сейчас

Captain Icon – 350 бесплатных векторных значков

Если вы хотите создавать невероятные мобильные и веб-дизайны, то вам стоит попробовать шрифт Captain Icon. Имея более 350 векторных значков, которые можно оптимизировать до любого размера без потери качества, шрифт Captain Icon доступен в форматах EPS, PSD, PNG, SVG и веб-шрифтов. Это идеальный выбор для использования в широком диапазоне категорий, таких как дизайн, спорт, социальные сети, офис, погода и многое другое.

Загрузить сейчас

Набор иконок MFG Labs

Этот шрифт для сетчатки состоит из векторов, и его можно легко встроить на веб-сайт или в приложение с помощью веб-шрифта и CSS. Шрифт MFG Labs Icon, который легко масштабируется на экранах Retina или мобильных дисплеях, поставляется с кодировкой Unicode для частного использования, чтобы избежать конфликтов с существующими в настоящее время символами.

Загрузить сейчас

20 лучших бесплатных шрифтов для значков для дизайна пользовательского интерфейса

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

20 лучших бесплатных шрифтов для веб-иконок для веб-дизайнеров | Набор лучших шрифтов для значков

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

такжеЧитать

CSS Frameworks

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

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

Table of Contents

• Captain Icon
• Dripicons
• Glyphicons
• Octicons
• Sosa
• Typicons
• Zondicons
• Elegant Icon
•   Entypo
• MFG Labs 
• Ionicons
• Font Awesome
• IcoMoon
• Fontello
• Iconshock
• Map Icon
• Material Design Icons
• Foundation
• Devicons
• Unicons Library
• Socialio
• В заключении

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

Dripicons — набор из 9 шт.0 красивых векторных иконочных шрифтов в плоском стиле; он отлично подходит для веб-сайтов и приложений, которым требуются мультимедиа, документация, стрелки, диаграммы и т. д.

такжеЧитать

Плоский дизайн веб-сайта 

Этот набор иконочных шрифтов дополняет множество различных типов шрифтов, особенно лучшие веб-шрифты Google, приложения iOS или AS X. Хотя существует множество платных наборов, есть также бесплатный набор Glyphicons. Этот набор включает 610 основных шрифтов и 60 социальных шрифтов. Бесплатные шрифты Glyphicons выпускаются под лицензией Creative Commons Attribution 3.0 Un-ported.

такжеЧитайте

Web Fonts Important

Ищете простой и легкий шрифт для значков? Octicons — ваше решение! Octicons — это собственный пакет, разработанный GitHub. Последняя версия 5.0 содержит множество иконок с несколькими основными символами. Вы можете найти их разбросанными по всему веб-сайту GitHub. Они очень удобны для пользователя, и вы можете использовать их практически на любом интерфейсе.

такжеЧитать

Google Design Sprint Process

Иконочный веб-шрифт Sosa — это специализированный иконочный шрифт, бесплатный для личного и коммерческого использования; теперь он предлагает более 160 шрифтов значков. Пользовательский интерфейс, устройства, мультимедиа, погода, инструменты, валюта, Интернет, электронная коммерция, социальные сети, элементы управления и т. д. — это категории, которые вы можете найти с помощью этого набора значков. Нет никаких ограничений на то, как вы можете использовать шрифты Sosa, просто вы не можете предлагать их для бесплатной загрузки на сторонних доменах.

Набор иконок Typicons хорошо подходит для целого ряда сайтов. Он имеет более 330 уникальных иконок в чем-то похожем стиле — простые очертания и сглаженные углы. Этот бесплатный пакет доступен на GitHub, что позволяет вам напрямую размещать значки на своем сайте и вносить любые изменения, которые вы считаете необходимыми. Typicons не так известен, как некоторые другие наборы иконок, но это хороший набор шрифтов. С помощью всего нескольких настроек и добавления фрагментов кода вы можете использовать их даже для iOS.

такжеЧитать

Проекты приложений для Android

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

такжеЧитать

Лучшая система управления контентом

Веб-шрифт Elegant Icon — это бесплатный набор, который содержит более 360 иконок, 50 из которых предназначены специально для бизнеса. Стиль иконок изящный и ослепительный, и творческим людям понравится их использовать. Эта векторная графика может сжиматься или расширяться без снижения качества, что приводит к кристально чистым и красивым значкам на различных типах дисплеев, даже на дисплеях Retina.

Набор веб-иконок Entypo не нов, но эти 400+ иконок превосходны и первоклассны среди бесплатных. Новые значки добавляются с перерывами, и вы можете легко получить к ним доступ. Шрифты доступны в двух наборах: пакет социальных сетей и основной пакет. Поэтому, если вам не нужны значки социальных сетей, вам нужно взять только основной пакет и уменьшить размер файла шрифта. Они выпущены под лицензией Creative Commons.

такжеЧитать

Тенденции социальных сетей

Лаборатории MFG выпустили собственный набор шрифтов веб-значков, абсолютно бесплатный и размещенный на GitHub, что означает легкий доступ! Он довольно новый и содержит обычные форматы веб-шрифтов, созданные с помощью Unicode PUA в CSS. Поскольку он полностью семантичен для разных браузеров, он помогает свести к минимуму конфликты с другим кодом CSS. Отличительный стиль иконок MFG Labs выделяет их в своем классе; их хорошо использовать с любым веб-сайтом — личным, брошюрным, электронной коммерцией или любым другим.

Ionic Framework очень популярен среди разработчиков нативных приложений, особенно когда речь идет о веб-приложениях для мобильных устройств. Опираясь на эту популярность и успех, команда Ionic создала собственный набор иконочных веб-шрифтов, назвав его Ionicons. Да, они на 100 % бесплатны, размещены на GitHub и могут быть добавлены прямо на ваш сайт, если вы используете CDN-версию таблицы стилей. Если вы новичок и раньше не работали с иконками, это идеально. Простые в настройке, эти значки могут стать вашей ступенькой для работы с другими более сложными веб-шрифтами.

такжеЧитать

Визуальный контекст Веб-дизайн

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

IcoMoon предоставляет два бесплатных набора иконочных шрифтов, которые потрясающе смотрятся со шрифтами с засечками и без засечек. 490 шрифтов со скругленными иконками сплошных цветов составляют первый набор; второй набор имеет другое название — Linearicons. Он содержит около 170 построчных шрифтов и распространяется под лицензией Creative Commons Attributions Sharealike.

такжеЧитайте

Мощные инструменты рекрутинга для веб-дизайна

Вы ищете иконочный шрифт, который несложный, но привлекает и удивляет? Что ж, ваши поиски заканчиваются на Фонтелло. Он предлагает более 1000 иконочных шрифтов, готовых для сетчатки. Они доступны на GitHub, что делает доступ очень простым. Fontello создает архив с документами, шрифтами и файлами CSS.

Iconshock, один из самых известных и популярных наборов шрифтов, содержит более 110 000 уникальных значков, предлагаемых в наборах по 300 штук. Различные наборы обычно включают бизнес, графику, бухгалтерский учет, мультимедиа, веб-дизайн, сети, базы данных и так далее.

такжеЧитать

Бесплатные стоковые изображения для веб-дизайнеров

Если вы хотите создать потрясающую и динамичную карту, значок карты поможет вам. Он предлагает более 700 масштабируемых значков векторной графики, которые вы можете использовать для обозначения местоположения, навигации и многого другого на своих картах. Он отлично подходит для Google Maps API и Google Places API и делает маркеры карты Google динамичными, предлагая контроль над формой, размером, цветом и значком либо с помощью параметров объекта маркера, либо с помощью нотаций CSS и SVG.

Дизайн материалов от технологического гиганта Google радикализировал подход UI/UX в Интернете, что привело к созданию нескольких новых ресурсов и фреймворков. Одним из них является шрифт значков материального дизайна, который совершенно бесплатный и размещен на GitHub для легкого доступа. Как и следовало ожидать от Google, это огромный пакет, предлагающий более тысячи значков, которые включают в себя широкий спектр функций интерфейса. Вы можете не только свободно использовать их в любом проекте, над которым работаете, но и свободно настраивать эти значки. Если вы работаете с рекомендациями Google по материалам в Интернете, лучшего быть не может.

такжеЧитать

UX Rules

283 различных шрифта на выбор: это то, что предлагает вам текущая версия иконочных шрифтов Foundation (V 3). Поскольку шрифты округлены, они хорошо сочетаются с различными шрифтами с засечками. Конечно, вы можете использовать предыдущие версии шрифтов; однако, если вам нужна согласованность, мы рекомендуем вам использовать последнюю версию.

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

такжеЧитать

Макет против каркаса

Библиотека Unicons

Библиотека Unicons — еще один набор креативных иконок с минимальным и простым дизайном, разработанный Iconscout. Доступно более 4500 иконок в линейном, сплошном, тонком и монохромном стилях. Нажав кнопку «Изменить цвет», вы можете выбрать цвет или добавить HEX-код своего бренда. Он покажет все значки в цвете вашего бренда. Эти значки также можно использовать в качестве шрифтов значков. Все, что вам нужно сделать, это добавить одну простую строку кода, и вы сможете легко получить к ней доступ. Это упрощает сотрудничество между дизайнерами и разработчиками. Если вы ищете иконки, которые идеально подходят для любого проекта, личного или коммерческого, вам обязательно стоит обратить внимание на юниконы от Iconscout.

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

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

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

Ищу хорошую команду

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

Интеграция иконочных шрифтов в ваш веб-сайт

Как описано в нашей предыдущей статье о иконочных шрифтах, иконочные шрифты — это векторные шрифты, которые содержат функциональные пиктограммы, а не буквы. Веб-разработчики, использующие иконочные шрифты, значительно выигрывают от свободно масштабируемых векторов. В отличие от пиксельных шрифтов, векторные шрифты определяются в графических примитивах, таких как линии, круги, многоугольники и кривые, независимо от устройств вывода. Это позволяет легкое преобразование без потери данных на основе CSS; таким образом, соответствующие значки не нужно отдельно загружать и настраивать в графической программе. Вместо этого форматирование выполняется веб-браузером на основе кода. Для этого файл CSS с иконочными шрифтами должен быть включен в заголовок HTML. Отдельные значки впоследствии могут быть интегрированы с помощью HTML-атрибута «класс» на веб-странице. Читайте дальше, чтобы узнать, как это работает с использованием популярного шрифта с открытым исходным кодом Font Awesome 9.0010 .