Еще в 2012 году на сайте Speckyboy, Design Magazine был опубликован первый Icon Font, бесплатный и премиум наборы. Здесь собраны 50 лучших бесплатных шрифтов с иконками (Icon Fonts), которые появились с тех пор. Смотрите.
Хотя, Icon Fonts очень популярны, но везде есть свои подводные камни. Ian Feather (Ян Фетер) обсудил свои причины перехода от Icon Fonts к SVG и хитрости CSS при выборе между Icon Fonts и SVG. Обе публикации явно в пользу SVGએ. Но, в качестве контраргумента, Pictonic показал, что Icon Fonts грузятся на 10% быстрее SVG. Поэтому, прежде чем использовать шрифты, вам необходимо познакомится с этими соображениями.
Для того, чтобы убедиться, что ваши иконки всегда загружаются должным образом и имеют для различных браузеров, не поддерживающих @fontface, надежные резервные объявления вам необходимо взглянуть на руководящие принципы, разработанные в
Dashicons — официальный Icon Font от WordPress (197 иконок)
Dashicons. Загрузить →
Linea Iconset (730+ иконок)
Linea Iconset. Загрузить →
Themify Icons (320+ иконок)
Themify Icons. Загрузить →
Octicons на GitHub (178 иконок)
Octicons на GitHub. Загрузить →
iOS7 векторный Icon Font (100 иконок)
iOS7 iOS7 векторный Icon Font. Загрузить →
Genericons (120 иконок)
Genericons. Загрузить →
Stroke 7 Icon Font (170 иконок)
Stroke 7 Icon Font. Загрузить →
Stroke Icons (80 иконок)
Stroke Icons. Загрузить →
Icon-Works (134 иконок)
Icon-Works
Devicons — Icon Font для разработчиков (123 иконок)
Devicons. Загрузить →
Solid Icons (210 иконок)
Solid Icons. Загрузить →
77 Essential Icons (77 иконок)
77 Essential Icons. Загрузить →
Tonicons Outline Icons (200 иконок)
Tonicons Outline Icons. Загрузить →
Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 иконок)
Stroke 7 – An iOS7. Загрузить →
The Elegant Icon Font (360 иконок)
The Elegant Icon Font. Загрузка страницы →
Dripicons — полностью бесплатный векторный шрифт in-line (95 иконок)
Dripicons. Загрузить →
Iconia — икона Шрифт С помощью трех стилей: Regular, круг и Cut (113 иконок)
Iconia. Загрузить →
Metrize Icons — иконки в стиле Metro (300 иконок)
Metrize Icons. Загрузить →
Icon Pack — стилизованный для строки шриф с иконками от Petras Nargela (40 иконок)
Стилизованный для строки Icon Pack
Ionicons — шрифт с огромными иконками для Ionic Framework (528 иконок)
Ionicons Загрузить →
Icon Pack (300+ иконки)
Icon Pack. Загрузить →
IcoMoon — бесплатный пакет (450 иконок)
IcoMoon. Загрузить →
Набор Web-иконок от MFG Labs Web (120 иконок)
Набор Web-иконок от MFG Labs Web. Загрузить →
Font Awesome — бесплатный Icon Font (500+ иконок, рекомендую)
Font Awesome. Загрузить →
Foundation Icon Fonts 2 (140 иконок)
Foundation Icon Fonts 2. Загрузить →
Ligature Symbols (250+ иконки)
Ligature Symbols. Загрузить →
OpenWeb бесплатный Icon Font (54 иконок)
OpenWeb Free Icon Font. Загрузить →
Соса — бесплатный Icon Font (120 иконок)
Соса. Загрузить →
One div (91 иконок)
One div. Загрузить →
PW Drawn Icon Font (80+ иконок)
PW Drawn Icon Font. Загрузка страница →
80 Mini Icons — иконки (80 иконок)
80 Mini Icons. Скачать шрифт →
Fontelico (30 иконок)
Fontelico. Загрузить →
Typicons (88 иконок)
Typicons. Загрузить →
Icons V.3 — бесплатный шрифт с иконками от Hüseyin Yilmaz (24 иконок)
Icons V.3 от Hüseyin Yilmaz. Загрузить →
Genericons — иконки для WordPress (123 иконок)
Genericons. Загрузить →
Open Iconic — хорошо читабельный шрифт с иконками (218 иконок)
Open Iconic. Загрузить →
Linecons Free — бесплатный In-Line Icon Font (48 иконок)
Linecons Free. Загрузить →
Outlined Icons от Dario Ferrando (150 иконок)
Outlined Icons от Dario Ferrando
Feather Icon Set — простой и красивый Icon Font (130 иконок)
Feather Icon Set. Загрузить →
Minimal — шрифт минималистичного дизайна (48 иконок)
Minimal. Загрузить →
Icony (100 иконок)
Icony. Загрузить →
Goodies Icon Font (25 иконок)
Goodies Icon Font. Загрузить →
Stackicons Social Icon Font (75 иконок)
Stackicons Social. Загрузить →
Socialicious — библиотека социальных медиа-иконок (58) иконки
Socialicious. Загрузить →
Mono Social — шрифт с иконками на основе набора Mono Social (100 иконок)
Mono Social. Загрузить →
Social Media Icons (74 иконок)
Social Media Icons. Загрузить →
Rondo — шрифт с социальными иконками (40 иконок)
Rondo. Загрузка страницы →
JustVector &mdsash; шрифт с социальными иконками (30 иконок)
JustVector. Загрузка страницы →
Social Media Set Glyph (30 иконок)
Social Media Set Glyph. Загрузить →
Infinity Space Icon Font (230 иконок)
Infinity Space Icon Font. Загрузить →
Map Icons — шрифт для Google Maps (150+) иконки
Map Icons. Загрузить →
Weather Icons — иконки для погоды (92 иконок)
Weather Icons. Загрузка страницы →
Meteocons (40 иконок)
Meteocons. Загрузить →
Оригинал: Top 50 Free Icon Fonts for Web Design
50 лучших шрифтов с иконоками для веб-дизайна, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.
1 нравится это
При разработке современных сайтов сложно представить жизнь без использования шрифтов, состоящих из иконок. Применение шрифтов с иконками дает огромные преимущества при разработке сайта — это работа с иконками как с обычным текстом (можно применять CSS-стили), они прекрасно масштабируются (являются векторными изображениями), уменьшение количества HTTP-запросов при отображении (на загрузку растровых изображений понадобилось бы больше запросов), меньший размер по сравнению с обычными изображениями, поддержка различными браузерами.
Конечно же, есть и такие недостатки как цвет иконки обычно ограничен одним цветом, а для использования недостаточно просто вставить иконку на страницу как при работе с обычными изображениями. Но данные недостатки легко компенсируются их преимуществами перед растровыми иконками.
Давайте рассмотрим бесплатные и полезные пакеты иконочных шрифтов.
Font Awesome — данный бесплатный пакет иконок не нуждается в рекламе и известен всем frontend-разработчикам, да и не только им. В коллекции шрифта 675 иконок (на данный момент доступна версия 4.7.0). Пожалуй, один из самых популярных бесплатных шрифтов, который используется на многих сайтах и фреймворках. На сайте доступны примеры по работе с Font Awesome. Если еще не пользовались им, то рекомендую взять в работу.
IcoMoon — в этом бесплатном пакете вам будут доступны 490 векторных иконок. Если вам не терпеться посмотреть на доступные иконки.
Linearicons
Ionicons — данный чудеснейший пакет включает в себя 730 премиальных иконок и доступен совершенно бесплатно. Среди такого количества я думаю можно найти все что нужно для своего веб-проекта. В шрифт включены иконки для ценителей плоского и минималистического дизайна. Однозначно, рекомендую!
Ligature Symbols — бесплатный шрифт без лишних иконок. Содержит все необходимые иконки для web. Для тех, кому важна скорость загрузки и не надо ничего лишнего. Кстати, не так уж и мало иконок — около 240 штук.
Stroke 7 Icon Font Set — вас ждут 202 плоские иконки. Приятно для взгляда и очень современно. Рекомендую ознакомиться.
Material Icons — это восхитительные, красиво обработанные символы для обычных действий и предметов. Загрузите на рабочий стол, чтобы использовать их в своих цифровых продуктах для Android, iOS и в Интернете.
Themify Icons — 320+ бесплатных иконок для веб-дизайна и приложений. Специально созданы для ценителей Apple iOS 7.
Foundation Icon Fonts 3 — в принципе обычные иконки, но возможно кому-то именно этот пакет подойдет для работы. Иконок в нем около 283 штук.
Sosa — пакет реалистичных иконок от команды разработчиков tenbytwenty. Иконок мало, так что для крупного проекта не подойдет.
Linea — на сайте для удобства доступно несколько бесплатных пакетов с векторными иконками: базовый пакет, погода, музыка, коммерция, программное обеспечение, разработка, указатели. Плоский дизайн и аккуратность присутствует. В сумме свыше 730+ иконок.
К сожалению, захватить все множество бесплатных векторных иконок не возможно за раз. Поэтому, как только будут появляться интересные пакеты бесплатных шрифтов, я буду их размещать в данном обзоре. Если вы хотите помочь мне с наполнением данной статьи или поделиться интересными иконками, то с радостью выслушаю все ваши комментарии.
Спасибо и следите за обновлениями на моем сайте.
Иконочный шрифт: подборка из 30 бесплатных
Статья обновлена:
Автор:
Мясоедов Анатолий
В прошлом посте я достаточно подробно рассказала о преимуществах и недостатках использования иконочных шрифтов. Но не маловажный вопрос где взять иконочный шрифт. Этот пост полностью посвящен ресурсам где вы можете бесплатно и легально скачать иконочный шрифт для использования на своем сайте.
Ниже представлены на мой взгляд самые интересные и функциональные иконочные шрифты. Их можно использовать как на сайте, так и в любых программах на вашем ПК (например я активно использую иконочный шрифт в презентациях PowerPoint). О установке иконочного шрифта на сайт или компьютер будет посвящен отдельный пост.
Так же если вы знаете о существовании какого то иконочного шрифта, но не нашли его в этом перечне — пишите в комментариях (с ссылкой). Единственным условиям является легальность использования. Буду безмерно благодарна!
П.С. В этом списке вы не найдете всем полюбившийся и получивший огромное распространение шрифт Awesome. Это сделано намеренно =). Он заслуживает отдельного поста.
Подборка: 30 бесплатных иконочных шрифтов
1. Dashicons – The Official WordPress myasoedov Icon Font (197 иконок)
2. Linea Iconset (730+ иконок)
3. Themify Icons (320 иконок)
4. GitHub’s Octicons (178 иконок)
5. iOS7 Vector Icons (100 иконок)
6. Genericons (120 иконок)
7. Stroke 7 Icon Font (170 иконок)
8. Stroke Icons (80 иконок)
9. Icon-Works (134 иконок)
10. Devicons – An Iconic Font For Developers (123 иконок)
11. 77 Essential Icons (77 иконок)
12. Tonicons Outline Icons (200 иконок)
13. Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 иконок)
14. The Elegant Icon Font (360 иконок)
15. Iconia – An Icon Font With Three Styles: Regular, Circle and Cut (113 иконок)
16. Metrize Icons – A Metro-Style Icon Font (300 иконок)
17. Icon Pack – A Line-Styled Icon Font from Petras Nargela (40 иконок)
18. Ionicons – The Huge Icon Font for the Ionic Framework (528 иконок)
19. Batch Icons (300+ иконок)
20. IcoMoon Free Pack (450 иконок)
21. MFG Labs Web Icon Set (120 иконок)
22. Foundation Icons (140 иконок)
23. Ligature Symbols (250+ иконок)
24. OpenWeb Free Icon Font (54 иконок)
25. Sosa Free Icon Font (120 иконок)
26. One Div (91 иконок)
27. PW Drawn Icon Font (80+ иконок)
28. Premium Pixels Mini Icons (80 иконок)
29. Fontelico Font (30 иконок)
30. Genericons – An Icon Font from WordPress (123 иконки)
Спасибо за прочтение
Вы можете сказать «Спасибо» 2 простыми способами:
-
Оцените статью:
Загрузка…
- Напишите что именно не понравилось, я не буду публиковать ваш комментарий, но обязательно добавлю информацию: Может мало фото? Может нет той информации, которую вы искали?
Комментарии 2
Бесплатные шрифты с иконками
Шрифты с иконкам вместо стандартного алфавита содержат разные символы, например, стрелочки, лупу, карандаши и многие другие иконки. Применяются, по сути, как альтернатива бесплатным пиктограммам. Как и для всех подобных нестандартных решений подключение осуществляется через CSS @font-face.
Преимущества подобных шрифтов с иконками очевидны:
- Кроссбраузерная поддержка (даже в IE6 работает с помощью @font-face).
- Могут масштабироваться на лету.
- Легко задавать любой цвет для иконок.
- К шрифтам можно применять разные CSS свойства, например тень.
Эти шрифты мне чем-то напоминают сервисы иконок созданных на CSS One Div и The Noun Project. И те, и другие достаточно гибкие в плане использования (кроссбраузерность, масштабирование, разные эффекты). Но применение шрифтов все же более простое, для них не требуется много строчек кода. Вот тут можете посмотреть демо использования шрифтов с иконками (попробуйте поменять там разные параметры).
Но вернемся все же непосредственно к самим наборам шрифтов.
Бесплатные шрифты с иконками
Raphaël Icon-Set
В наборе Raphaël Icon-Set 116 иконок, лицензия MIT License. Тут реально много разных иконок — от погоды, смайликов, браузеров до социальных сетей и системных картинок.
Sosa icon font
В Sosa icon font найдете 121 иконку, допускается использование в коммерческих проектах. Вместе с весьма необычными картинками полно стандартных изображений (стрелочки и прочие системные иконки).
Foundation Icon Fonts 3
В наборе Foundation Icon Fonts 3 283 иконки, которые разделены на группы: основные, страницы, стрелочки, люди, устройства, текстовый редактор, медиа, электронная коммерция, социальные и другие.
Font Awesome
В шрифте Font Awesome имеется 369 иконок. Набор постоянно добавляется и расширяется.
Iconic Icon Set
Обязательно зайдите на страницу тура на сйате Iconic Icon Set, где сможете почитать о всех преимуществах этого шрифта. Плюсы такие, как и везде — масштабирование, эффекты, оформление цветом и т.п.
IcoMoon
Для создания шрифта IcoMoon нужно воспользоваться специальный приложением сервиса IcoMoon web app. Если я правильно понял, то здесь можно просмотреть несколько разных наборов шрифтов, а также добавлять свои собственные иконки.
Entypo
В Entypo более 100 разных иконок, лицензия — Creative Commons Attribution 3.0 Unported.
Typicons
Набор Typicons содержит 336 иконок на любой вкус и цвет.
Weather Icons
Если у вас имеется проект/приложение с погодными прогнозами и подобной тематикой, то данный вариант от Weather Icons будет интересен. Всего он содержит 222 объекта, которые можно добавлять в Bootstrap сборку, изменять с помощью CSS и т.д. Элементы разбиты на группы: ночные, дневные, нейтральные, фазы луны и разное. Также советуем глянуть иконки погоды в PNG и векторе.
Nerd Fonts
Напоследок предлагаем оценить агрегатор шрифтов Nerd Fonts, который включает себя несколько наборов для разработчиков. Кроме упомянутого выше Font Awesome, найдете здесь такие проекты как Octicons, Seti UI, Devicons и др. Общее число иконок на данный момент — 1330. На сайте проекта найдете описание, возможность поиска по всему архиву и другую инфу.
В принципе, я не первый раз сталкиваюсь со шрифтами с иконками (в фотошопе пригодились пару раз), но никогда не думал о их применении в веб-приложениях и сайтах. А ведь это реально удобно и эффективно. Думаю, данные наборы шрифтов разработчикам должны понравится.
Как создать набор иконок в формате шрифта
- Статьи
- Видеоуроки
- Таймлайн
- Вопросы
- Поиск
-
- Войти
- Регистрация
- HTML & CSS
- JavaScript
- Bootstrap
Иконочные шрифты для сайта
Время чтения: 2 мин. 
Так как всё больше пользователей используют мобильные устройства для путешествия в интернете, то необходимо сделать сайт адаптивным для различных разрешений экрана. И здесь появляется проблема с размерами изображений, потому что они на экранах с большим разрешением смотрятся не очень красиво. В этом случае появилось отличное решение -использовать иконочные шрифты: маленький объем, четкость на больших экранах, стили можно задать с помощью CSS.
Также рекомендую:
Самыми популярными являются иконки Font Awesome. Но бывает и их недостаточно. Ниже Вы найдете подборку сервисов с иконочными шрифтами, которые можно использовать вместо Font Awesome.
1. StackIcons
StackIcons содержит более 60 иконок различных современных брендов. Вы можете использовать иконки как с прозрачным фоном, так и в круге, квадрате или квадрате с закругленными углами. Также иконкам можно изменять цвета.
2. Twemoji Awesome
Это иконки от социальной сети Twitter. Подключается также всё достаточно просто. Если возникают сложности с их установкой — скачайте пример и посмотрите как это реализовано там. Иконки можно применять из этой шпаргалки. Только вместо нижнего подчеркивания необходимо ставить дефис.
3. Octicons
Иконки от проекта GitHub. Здесь представлено более 170 иконок, которые Вы можете смело использовать на своих сайтах. Подробный процесс установки описан здесь.
4. Material Design Iconic Font
Данный сервис предоставляет значительно больше иконок, которые сгруппированы в 15 разных категорий. Чтобы установить их себе на сайт, Вам достаточно лишь подключить файл Material-Design-Iconic-Font.ttf, а затем использовать специальные коды символов из этой таблицы. Все действия над данными иконками аналогичны действиям со шрифтами в CSS.
С Уважением, Юрий Немец
Открытые исходные веб-шрифты позволяют дизайнерам кардинально менять дизайн страниц и типографские стили. Некоторые из этих веб-шрифтов используют наборы иконок, для переноса векторных значков в 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 и поделитесь ссылкой на запись в своих соц-сетях:
14 бесплатных шрифтов для веб-дизайнеров
By Тревин Ширей от 26 марта 2020 года Тревин является старшим директором по развитию бизнеса в WebFX. Он участвовал в более чем 450 маркетинговых кампаниях и занимается созданием веб-сайтов более 20 лет. Его работы были показаны Search Engine Land, USA Today, Fast Company и Inc.Примечание: Перед использованием любого из шрифтов значков ниже, вы должны прочитать их лицензию и условия использования.
Дизайн сайта важен для любой компании, которая хочет привлечь клиентов. Наличие соответствующих и последовательных значков шрифтов является частью того, что делает дизайн таким эффективным и успешным. Ваш шрифт может легко стать решающим фактором между клиентом, который решит остаться на вашем сайте, и тем, кто решит двигаться дальше.
Страница загрузкиIonicons
2. Shock Icon Font (1121 иконка)
Полное раскрытие: Я являюсь основателем семейства сайтов Shock, и этот бесплатный шрифт иконок был создан моей компанией.
Shock Icon Скачать шрифт Страница
Страница загрузки дрипиконов
4. Entypo (250 икон)
Страница загрузки Entypo
5. Соса (160 икон)
Страница загрузки Sosa
Foundation Значки Скачать страницу
7.Типиконы (308 икон)
СтраницаТипиконов Скачать
The Elegant Icon шрифт Загрузка страницы
Карта Скачать иконки Страница
Лигатурные символы Скачать страницу
Heydings Иконки Скачать страницу
Fontawesome Скачать Страница
13. Значить (38 икон)
Страница загрузки для
14. PulsarJS (73 иконы)
PulsarJS Скачать страницу
Как использовать Icon Fonts
Узнайте, как использовать шрифты значков, прочитав эти руководства:
Real Advice
WebFX — это агентство по цифровому маркетингу с полным спектром услуг, которое предлагает все — от SEO-ссылок до маркетинга в социальных сетях.Знание того, как успешно использовать иконки-шрифты, выделит вас среди конкурентов. Стоимость веб-дизайна не должна стоять между вами и вашим бизнесом, привлекая новых клиентов. WebFX предлагает отличные советы по дизайну веб-сайтов для конкретных отраслей, таких как веб-дизайн для отелей.
Если вы хотите расширить свой сайт или узнать больше, вы можете связаться с нами по телефону 888-601-5359, чтобы поговорить со стратегом.
,Ранее значки и символы в Интернете были представлены в виде изображений; хотя они были совместимы между браузерами, они требовали разработки, оптимизации и обрезки, прежде чем пользователь сможет загрузить и реализовать их. Это означало, что всякий раз, когда менялся брендинг сайта, эти крошечные изображения приходилось заново создавать заново. web Иконочные шрифты , с другой стороны, предлагают новый способ использования иконографии с той же совместимостью, но гораздо большей гибкостью.Шрифты в основном представляют собой набор символов и включают в себя преимущества, предлагаемые свойствами шрифта CSS.
Иконочные шрифты привлекают внимание и помогают создавать визуально привлекательные веб-сайты с их многочисленными и разнообразными функциями.
Веб-шрифты с открытым исходным кодом позволяют дизайнерам вносить смелые нововведения в свою типографику и дизайн страниц. Вот некоторые из лучших бесплатных веб-иконок шрифтов :
Captain Icon
Созданный дизайнером Марио дель Валье пакет Captain Icon размещен на Github.Он содержит более 350 векторных иконок, каждая из которых имеет уникальный дизайн, нарисованный вручную с нуля. Именно этот факт выделяет этот набор из множества наборов иконок, которые мы видим сегодня. Тем не менее, он может быть более подходящим для творческих сайтов, чем другие; так как иконки нарисованы от руки, они не могут быть идеальными для сайта здравоохранения или финансовых услуг.
Dripicons
Dripicons — это набор из 90 плоских красивых векторных иконок; он отлично подходит для веб-сайтов и приложений, которым требуются мультимедиа, документация, стрелки, диаграммы и т. д.
Glyphicons
Этот набор шрифтов иконок дополняет многие различные типы шрифтов, особенно лучшие веб-шрифты Google, приложения для iOS или AS X. Хотя существует множество платных наборов, есть также бесплатный набор Glyphicons. Этот набор включает в себя 610 основных шрифтов и 60 социальных шрифтов. Бесплатные шрифты Glyphicons выпускаются под лицензией Creative Commons Attribution 3.0 Unported.
Octicons
Ищете несложный, легкий значок шрифта? Октиконс — это ваше решение! Octicons — это внутренний пакет, разработанный GitHub.Последняя версия 5.0, и имеет множество иконок с несколькими основными символами. Вы можете найти их разбросанными по всему сайту GitHub. Они очень удобны для пользователя, и вы можете использовать их практически на любом интерфейсе.
Sosa
Шрифт Sosa для веб-иконок — это специализированный шрифт, бесплатный для личного и коммерческого использования; теперь он предлагает более 160 значков. Пользовательский интерфейс, устройства, медиа, погода, инструменты, валюта, интернет, электронная торговля, социальные сети, элементы управления и т. Д. — это категории, которые вы можете найти с помощью этого набора значков.Нет никаких ограничений на использование шрифтов Sosa, просто вы не можете предлагать их для бесплатной загрузки на сторонних доменах.
Typicons
Набор значков Typicons хорошо работает для целого ряда сайтов. В нем более 330 уникальных иконок в несколько похожем стиле — простые контуры и сглаженные углы. Этот бесплатный пакет доступен на GitHub, что позволяет вам напрямую развертывать иконки на вашем сайте и вносить любые изменения, которые вы считаете необходимыми. Typicons не так хорошо известен, как некоторые другие наборы иконок, но это хороший набор шрифтов.С помощью всего лишь нескольких настроек и добавления фрагментов кода вы даже можете использовать их для iOS.
Zondicons
Zondicons бесплатны и их очень легко добавить на ваш сайт; однако они не имеют архива обновлений, поскольку они не размещены на GitHub. Тем не менее, есть демонстрационная страница, которая отображает все примеры, например, какие классы CSS вам понадобятся для обеспечения их эффективной работы. Основная ссылка для загрузки Zondicons — прямо с веб-сайта, что затрудняет проверку любых новых значков, которые были недавно добавлены, или какие-либо существующие были обновлены.Тем не менее, если дизайн вашего сайта не слишком сложен, вы можете использовать этот набор иконок; они просты в использовании и очень естественно вписываются в ваш сайт с общим стилем.
Elegant Icon
Веб-шрифт Elegant Icon — это бесплатный набор, содержащий более 360 иконок, причем 50 из них предназначены специально для бизнеса. Стиль иконок изящен и ослепителен, и творческие люди будут любить их использовать. Эта векторная графика может сжиматься или расширяться без ухудшения качества, что приводит к кристально чистым, красивым значкам на различных типах дисплея — даже на сетчатке.
Entypo
Набор веб-иконок Entypo не нов, но эти 400+ значков превосходны и являются первоклассными среди бесплатных. Новые иконки добавляются периодически, и вы можете легко получить к ним доступ. Шрифты доступны в двух наборах: пакет социальных сетей и основной пакет. Поэтому, если вам не нужны значки социальных сетей, вам нужно только взять основной пакет и уменьшить размер файла шрифта. Они выпущены на условиях лицензии Creative Commons.
MFG Labs
MFG Labs выпустили собственный набор шрифтов для веб-иконок, абсолютно бесплатный и размещенный на GitHub — что означает легкий доступ! Он довольно новый и содержит обычные форматы веб-шрифтов, созданные с помощью Unicode PUA в CSS. Поскольку он полностью семантический для всех браузеров, он помогает минимизировать конфликты с другим кодом CSS. Отличительный стиль значков MFG Labs делает его отдельным классом; они хороши для использования на любом веб-сайте — личном, брошюре, электронной коммерции или любом другом.
Ionicons
Ionic Framework пользуется огромной популярностью у разработчиков собственных приложений, особенно когда речь идет о веб-приложениях для мобильных приложений. Опираясь на эту популярность и успех, команда Ionic создала собственный набор веб-шрифтов для иконок, назвав его Ionicons. Да, они на 100% бесплатны и размещены на GitHub, и их можно добавлять прямо на ваш сайт, когда вы используете версию CDN таблицы стилей. Если вы новичок, который ранее не работал с иконками, это идеально.Простые в настройке, эти значки могут стать отправной точкой для работы с другими более сложными веб-шрифтами.
Font Awesome
Это любимый выбор многих дизайнеров, так как он является одним из оригинальных веб-шрифтов и существует уже много лет. Он признан первым значком шрифта с открытым исходным кодом и регулярно обновляется инновационными иконками. Бесплатная загрузка на GitHub, текущая версия не 4.7. у него есть некоторые большие преимущества, такие как возможность поддерживать его непосредственно в CSS и быть полностью масштабируемым.Он также очень настраиваемый, позволяя вам поиграть с фоновыми градиентами, тенями и цветами и всем, что вы хотите изменить, с помощью чистого CSS3. Это зрелые и надежные наборы иконок — вы знаете, что они не исчезнут со сцены в ближайшее время.
IcoMoon
IcoMoon предлагает два бесплатных набора шрифтов иконок, которые отлично смотрятся со шрифтами с засечками и без засечек. 490 закругленных значков шрифтов в сплошных цветах составляют первый набор; Второй набор имеет другое название — Linearicons.Он содержит около 170 шрифтов, основанных на строках, и распространяется под лицензией Creative Commons Attributions Sharealike.
Fontello
Вы ищете несложный шрифт, который привлекает и поражает? Что ж, ваш поиск заканчивается на Фонтелло. Он предлагает более 1000 значков шрифтов, которые готовы к сетчатке. Они доступны на GitHub, что делает доступ к ним очень простым. Fontello создает архив с документами, шрифтами и CSS-файлами.
Iconshock
Один из самых известных и популярных наборов шрифтов иконок, Iconshock имеет более 110 000 уникальных иконок, предлагаемых в наборах по 300.Различные наборы обычно включают в себя бизнес, графику, бухгалтерский учет, мультимедиа, веб-дизайн, сети, базы данных и так далее.
Map Icon
Если вы хотите создать потрясающую и динамичную карту, Map Icon поможет вам. Он предлагает более 700 масштабируемых векторных графических иконок, которые вы можете использовать, чтобы отмечать местоположение, навигацию и многое другое на ваших картах. Он отлично подходит для API Карт Google и API Google Адресов и делает маркеры карт динамическими, предлагая контроль над формой, размером, цветом и значком либо с помощью параметров объекта маркера, либо с помощью нотаций CSS и SVG.
Значки материалов дизайна
Дизайн материалов от технологического гиганта Google радикализировал подход UI / UX в сети, что привело к созданию нескольких новых ресурсов и структур. Один из них — бесплатный шрифт со значком дизайна материала, размещенный на GitHub для легкого доступа. Как вы можете ожидать от Google, это огромный пакет, предлагающий более тысячи значков, которые включают в себя широкий спектр функций интерфейса.Вы можете не только свободно использовать их в любом проекте, над которым вы работаете, вы также можете свободно настраивать эти значки. Если вы работаете с рекомендациями по материалам Google в Интернете, ничего лучше не может быть.
Foundation
283 различных шрифта на выбор: вот что предлагает вам текущая версия значков шрифтов Foundation (V 3). Поскольку шрифты округлены, они хорошо сочетаются с различными шрифтами с засечками. Конечно, вы можете использовать предыдущие версии шрифтов; однако, если вам нужна согласованность, мы рекомендуем вам использовать последнюю версию.
Devicons
Один из более новых доступных наборов веб-шрифтов, Devicons отлично подходит для брендинга и технических логотипов. В набор входят все виды логотипов, которые вы можете себе представить, от крупных игроков до новых логотипов CMS. Они идеально подходят, если вы создаете сайт, который требует векторных технических логотипов. Этот набор массивный и абсолютно бесплатный.
Socialio
Как следует из названия, Socialio представляет собой набор из 74 иконок социальных сетей, которые лучше всего подходят для социальных целей; тем не менее, вы можете создать весь сайт с помощью этих поразительно ярких иконок.
Заключение
Смущает богатство, когда дело доходит до наборов веб-иконок, даже бесплатных, доступных для использования; просто изучите несколько проектов, чтобы определить, какие из них лучше всего соответствуют потребностям вашего проекта.
Acodez IT Solutions — компания по веб-дизайну в Индии, предлагающая все виды решений для веб-дизайна — от карусельных сайтов до ультрасовременных сайтов, которые есть только у нескольких мультигигантов. Мы также являемся SEO-агентством, базирующимся в Индии, и предлагаем нашим клиентам всевозможные SEO и маркетинговые решенияДля более подробной информации, вы можете посетить наш сайт или связаться с нами.
Ищете хорошую команду
для вашего следующего проекта?
Свяжитесь с нами, и мы бесплатно предоставим вам предварительную консультацию
по веб-стратегии и стратегии мобильной связи, которая наилучшим образом соответствует вашим потребностям.
Font Icons — 1,520 бесплатных векторных иконок
Представляем Коллекции
Коллекции— это доступный способ управления вашей библиотекой значков и ядро нашего веб-приложения. Вы хотите знать, как их использовать? Нажмите стрелку вправо или воспользуйтесь верхней навигацией для просмотра руководства.
Добавить значки
Просмотрите пакеты или значки поиска и добавьте их в свою активную коллекцию с помощью этой кнопки.
Вид списка
Это список ваших коллекций. Вы можете изменить их имена, и они отсортированы по использованию. Нажмите на один из них, чтобы начать использовать его.
Создать коллекцию
Нажмите на эту кнопку, чтобы создать новую коллекцию.
Активная коллекция
Это ваша активная коллекция.Коллекция может содержать до 256 значков, если вы являетесь зарегистрированным пользователем, или 50, если вы не зарегистрированы.
Варианты сбора
Доступ к этому меню для редактирования вашей коллекции; редактируйте свои значки отдельно, дублируйте свою коллекцию, сортируйте значки в своей коллекции или делитесь ею с остальным миром.
SVG Загрузить
Перетащите SVG-файлы в активную коллекцию, чтобы загрузить свои собственные значки.Для бесплатных пользователей существует ограничение в 3 иконки на коллекцию.
Полноэкранный режим
Недостаточно места? Теперь вы можете просматривать свои коллекции в полноэкранном режиме, чтобы вам было проще.
Удалить
Вы закончили с этой коллекцией? Удалите его и создайте новый здесь.
Наслаждайтесь!
И это все.Если у вас есть какие-либо вопросы, вы можете связаться с нашей службой поддержки здесь.
Благодарим Вас за использование Flaticon, мы надеемся, что вам понравится наш сервис
× ЗакрытьSvg Icon Font Packs Загрузки
КомпанияДжонатан Барнбрук и Маркус МакКаллион
авторДжонатан Барнбрук и Маркус МакКаллион
Торговая маркаTourette Extreme является товарным знаком Джонатана Барнбрука и Маркуса МакКаллиона.
авторское правоCopyright (c) Джонатан Барнбрук и Маркус МакКаллион, 2005. Все права защищены.
Лицензия==================================== Лицензионное соглашение с конечным пользователем (EULA) ====== ============================== Загружая и / или устанавливая программное обеспечение Virus Fonts, вы соглашаетесь со следующими условиями: 1.Программное обеспечение Virus Font Software лицензируется для использования в одном (1) месте с максимум пятью (5) устройствами. Например: пять (4) процессоров и один (1) принтер. 2. Использование программного обеспечения Virus Font более чем в одном (1) месте или с более чем шестью (5) устройствами требует обновления лицензии для нескольких устройств. Чтобы определить количество устройств, добавьте все процессоры, рабочие станции, принтеры и другие устройства, которые используют шрифты. Устройство может быть, но не ограничиваясь этим, принтером, растеризатором, терминалом отображения видео, процессором, рабочей станцией или любым устройством, где программное обеспечение шрифта растеризовано или отображение вирусного шрифта генерируется из контуров программного обеспечения шрифта с использованием Adobe Type Manager или аналогичного программное обеспечение.Например, дисплейный терминал должен считаться устройством, если схема Virus Font встроена или иным образом включена для просмотра конечными пользователями на мультимедийном компакт-диске. 3. За исключением случаев, разрешенных в настоящем документе, вы не можете изменять, адаптировать, переводить, осуществлять инженерный анализ, декомпилировать, дизассемблировать, изменять или иным образом копировать программное обеспечение Virus Font. 4. Вам разрешено сделать одну резервную копию. Программное обеспечение или документация о вирусных шрифтах не могут быть сублицензированы, проданы, сданы в аренду, сданы в аренду, предоставлены в аренду или переданы другому лицу или организации.5. Программное обеспечение Virus Font может быть возвращено или заменено только в случае его неисправности. Дефектное программное обеспечение будет заменено, если оно сопровождается действительной квитанцией о продаже, и Вирус уведомляется в течение одной (1) недели после покупки. 6. Вы соглашаетесь с тем, что любые производные работы, созданные вами из Вирусного шрифтового программного обеспечения, включая, но не ограничиваясь этим, программное обеспечение, файлы EPS или другие электронные работы, считаются производными работами, и использование производных произведений регулируется условиями и положениями. условия данного лицензионного соглашения. Производные работы не могут быть сублицензированы, проданы, сданы в аренду, сданы в аренду, одолжены или переданы без письменного разрешения Virus.Вирус не несет ответственности за несанкционированное, модифицированное и / или восстановленное программное обеспечение или производные работы. Внедрение программного обеспечения Virus Fonts в любой форме строго запрещено без дополнительной лицензии. 7. Программное обеспечение Virus Font защищено внутренним и международным законодательством о товарных знаках и авторских правах. Вы соглашаетесь идентифицировать шрифты Virus по названию и сообщению о том, что Virus владеет товарными знаками и авторскими правами на любой дизайн или производственный кредит. 8. Любое нарушение условий настоящего Соглашения является основанием для расторжения.В случае прекращения действия и без ограничения каких-либо средств правовой защиты по закону и справедливости вы соглашаетесь немедленно вернуть Программное обеспечение для шрифтов в Virus и подтвердить, что ни одна копия не остается в вашем распоряжении или под вашим контролем. 9. ВИРУС НЕ ПРЕДОСТАВЛЯЕТ НИКАКИХ ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ В ОТНОШЕНИИ ТОВАРНОГО ОБЕСПЕЧЕНИЯ, ФИТНЕСА ДЛЯ ОСОБЕННОЙ ЦЕЛИ ИЛИ ИНОГО ОБРАЗЦА. БЕЗ ОГРАНИЧЕНИЯ ПРЕДОТВРАЩЕНИЯ, ВИРУС НЕ ДОЛЖЕН ОТВЕТСТВЕННО ЗА ЛИЦЕНЗИРОВАННОГО ПОЛЬЗОВАТЕЛЯ ИЛИ ЛЮБОГО ТРЕТЬЕГО ЛИЦА ДЛЯ ЛЮБОГО ПРЯМОГО, НЕПРЯМОГО, ИЛИ СЛУЧАЙНОГО УЩЕРБА, ВКЛЮЧАЯ УБЫТКИ ИЗ-ЗА УБЫТКИ С ПРИБЫЛЬЮ, БИЗНЕС-ИНТЕРПАЦИИ ВНЕ ИСПОЛЬЗОВАНИЯ ИЛИ НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ ПРОДУКТА, ДАЖЕ ЕСЛИ УВЕДОМЛЕНО В СЛУЧАЕПОД НИКАКИМИ ОБСТОЯТЕЛЬСТВАМИ ОТВЕТСТВЕННОСТЬ VIRUS НЕ ПРЕВЫШАЕТ СТОИМОСТИ ЗАМЕНЫ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ. ОБНОВЛЕНИЕ ЛИЦЕНЗИИ Программное обеспечение Virus Font Software лицензируется для использования в одном месте для использования максимум с шестью (6) устройствами. Например: (1) принтер с пятью (5) процессорами. Программное обеспечение Virus Font не может быть разделено между местами или бизнес-объектами. Каждое дополнительное местоположение и / или организация должны приобрести отдельную лицензию для использования в соответствии с условиями Лицензии на программное обеспечение Virus Font. Обновления лицензии можно приобрести для использования с дополнительными устройствами.Цена обновления рассчитывается в процентах от первоначальной цены программного обеспечения. Некоторые штаты или юрисдикции не допускают исключения или ограничения подразумеваемых гарантий и случайных, косвенных или специальных убытков. Исключения или ограничения, содержащиеся в Лицензионном соглашении по программному обеспечению для вирусных шрифтов, могут на вас не распространяться. Ограничения исключений и / или ограничений Лицензионного соглашения на программное обеспечение для работы с вирусными программами вступают в силу только в минимальной степени, разрешенной вашим государством или юрисдикцией, и только если этого требует ваш штат или юрисдикция.Ни при каких обстоятельствах исключения и / или ограничения из Лицензионного соглашения о программном обеспечении для вирусных шрифтов не должны превышать тридцати (30) дней после даты покупки или минимального времени, предоставляемого вашим государством или юрисдикцией, в зависимости от того, что меньше. После этого применяются все исключения и / или ограничения из Лицензионного соглашения о программном обеспечении для вирусных шрифтов. Лицензионное соглашение по программному обеспечению для вирусных шрифтов дает вам определенные юридические права, и у вас могут быть другие права, которые различаются в зависимости от штата.
,