Шрифты иконок: Все иконки Font Awesome
Бесплатные шрифты с иконками
Шрифты с иконкам вместо стандартного алфавита содержат разные символы, например, стрелочки, лупу, карандаши и многие другие иконки. Применяются, по сути, как альтернатива бесплатным пиктограммам. Как и для всех подобных нестандартных решений подключение осуществляется через 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. На сайте проекта найдете описание, возможность поиска по всему архиву и другую инфу.
В принципе, я не первый раз сталкиваюсь со шрифтами с иконками (в фотошопе пригодились пару раз), но никогда не думал о их применении в веб-приложениях и сайтах. А ведь это реально удобно и эффективно. Думаю, данные наборы шрифтов разработчикам должны понравится.
10 лучших бесплатных шрифтов иконок (Icon Fonts) для веб-дизайнеров
Главная » Статьи » 10 лучших бесплатных шрифтов иконок (Icon Fonts) для веб-дизайнеров
Icon Fonts — это шрифты, которые вместо букв прописывают специальные символы в виде иконок. И их вы можете использовать при создании потрясающего дизайна вашего WordPress сайта без умения рисовать в векторе.
Главным достоинством такого подхода является то, что вам просто нужно установить один из этих шрифтов и вы уже можете пользоваться бесплатным набором качественных svg иконок на своем сайте.
Думаем, вы уже поняли суть удобства использования Icon Fonts. А где же их брать, спросите вы? И тут у нас есть отличная новость. Таких шрифтов есть больше количество на выбор и вы можете скачать их абсолютно бесплатно!
Например, можете выбрать один из нижеперечисленных полностью бесплатных шрифтов, которые мы отобрали для вас и точно можем гарантировать их качество.
1. Font Awesome
Это, наверное, самый популярный на данный момент шрифт иконок, которым пользуются больше количество веб-дизайнеров по всему миру.
Шрифт Awesome существует уже много лет и он не прекращает свое развитие и обновление значков по сей день, что является очень хорошим показателем качества данного выбора.
Каждый значок полностью масштабируется и поддерживается непосредственно в CSS. Поэтому, вы можете менять цвета, тени, фоновые градиенты и многое другое, используя чистый CSS3. Скачать этот шрифт можно на GitHub.
2. Octicons
Не так давно GitHub открыл свой собственный набор значков под названием
Иконки данного шрифта можно найти в использовании не только самого сайте GitHub, но и множества других сайтов всемирной паутины. Потому что, они получились настолько просты и универсальны в своем стиле, что могут подойти к дизайну практически любого интерфейса современного сайта.
3. Captain Icon
Коллекция значков, созданная дизайнером Mario del Valle. Captain Icon — это совершенно бесплатный проект с открытым исходным кодом, размещенный на GitHub с векторными файлами и веб-шрифтами.
То, что привлекает особое внимание разработчиков к этому пакету значков, — это их стиль. Тут каждый значок имеет очень уникальный дизайн, и все они были нарисованы с нуля. Этот рисованный стиль, заставляет их выделяться среди других более строгих наборов иконок.
Но, их уникальность не всегда подойдет к общему дизайну сайта. Поэтому данный шрифт лучше всего использовать на творческих сайтах, где стиль ручной прорисовки будет соответствует макету.
4. Zondicons
К сожалению, шрифт Zondicons не размещен на GitHub, поэтому у него нет истории обновлений. А основная ссылка для скачивания шрифта поступает прямо с официального веб-сайта, поэтому трудно сказать, были ли они когда-либо обновлены вообще.
Иконки шрифта и их CSS классы вы можете увидеть на демонстрационной странице. А просмотрев их, можно понять, что это хороший качественный набор для использования на сайтах с универсальным дизайном.
5.
Typicons
TypiconsС закругленными углами и более простыми контурами набор иконок Typicons идеально подходит для любого современного сайта. Набор поставляется с 330+ уникальными значками, но общим стилем.
Пакет полностью бесплатный и также доступен на GitHub. А еще, он может служить для iOS разработок, но с некоторыми незначительными настройками и специальными фрагментами кода.
6. Entypo
Это превосходные значки Entypo существует уже несколько лет. И за это время они хорошо себя показали среди своих конкурентов приятным и универсальным дизайном.
Данный набор разделяется на две группы: основной пакет и социальный пакет. Поэтому, если вам не нужны значки социальных сетей, вы можете уменьшить размер шрифта.
Entypo поставляется с более чем 400 значками и лицензией CC sharealike. А так же, вы можете найти их на GitHub.
7. MFG Labs
MFG Labs — это довольно таки новый шрифт в этом списке старичков, который так же имеет свой собственный набор иконок.
Каждый значок шрифта заполняется стандартными форматами webfont с использованием Unicode PUAs в CSS. Поэтому, MFG Labs является полностью отзывчивым решением для всех браузеров.
8. Ionicons
Ionicons также являются абсолютно бесплатным шрифтом, который доступен на GitHub.
Для новичков, которые раньше не использовали значки в своей работе, это просто потрясающее решение. Так как, они очень просты в настройке и не требуют особых усилий в их использовании.
9. Devicons
Пакет Devicons это еще один вариант веб-шрифтов, которые вы можете использовать у себя, но уже для отображения не иконок, а технических логотипов или логотипов известных брендов. Что бывает очень полезным для создания, например, порталов или блогов ИТ направления.
Информацию об установке вы найдете на этой странице с бесплатной версией CDN, которую вы можете использовать для уменьшения времени загрузки.
10. Material Design Icons
Уже давно всем известно, что компания Google ввела новое направление в дизайне — «Material design». А это, в свою очередь, привело к появлению множества новых фреймворков и дополнений, включая пакет шрифтов иконок Material Design Icons.
Данный комплект иконок является очень обширным и имеет больше чем 1000 значков, которые охватывают широкий спектр функций интерфейса современных сайтов. И его вы также можете абсолютно бесплатно скачать на GitHub.
Завершение
Очень трудно было выбрать среди множества достойных решений самые лучшие. Но, как мы считаем, именно на эти варианты нужно обратить внимание в первую очередь. А если вы на своих проектах пользуетесь каким-то другим набором и вы считаете его более достойным — напишите нам про это в комментариях. И, возможно, мы сделаем более обширный список в будущем.
Иконочные шрифты или SVG — что выбрать в 2018? – База знаний Timeweb Community
Графические иконки — ключевой элемент практически любого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. Если не брать в расчет стандартные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Что из них лучше? Разберемся ниже.
Эволюция иконок
Перед тем, как появился язык стилей CSS, все иконки на сайтах представляли собой изображения. Но так как файлы изображений много весят, разработчики стремились найти один или несколько альтернативных способов отображения маленьких иконок. Например, CSS-спрайты позволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью этот способ не стал популярным способом отображения иконок — и в 2012 на смену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике — SVG (Scalable Vector Graphics).
Что такое иконочные шрифты
Иконочные шрифты — текстовые файлы, которые можно модифицировать при помощи 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 или иконочные шрифты?
Иконочные шрифты для верстальщиков — Программирование и не только
При разработке современных сайтов сложно представить жизнь без использования шрифтов, состоящих из иконок. Применение шрифтов с иконками дает огромные преимущества при разработке сайта — это работа с иконками как с обычным текстом (можно применять CSS-стили), они прекрасно масштабируются (являются векторными изображениями), уменьшение количества HTTP-запросов при отображении (на загрузку растровых изображений понадобилось бы больше запросов), меньший размер по сравнению с обычными изображениями, поддержка различными браузерами.
Конечно же, есть и такие недостатки как цвет иконки обычно ограничен одним цветом, а для использования недостаточно просто вставить иконку на страницу как при работе с обычными изображениями. Но данные недостатки легко компенсируются их преимуществами перед растровыми иконками.
Давайте рассмотрим бесплатные и полезные пакеты иконочных шрифтов.
Font Awesome — данный бесплатный пакет иконок не нуждается в рекламе и известен всем frontend-разработчикам, да и не только им. В коллекции шрифта 675 иконок (на данный момент доступна версия 4.7.0). Пожалуй, один из самых популярных бесплатных шрифтов, который используется на многих сайтах и фреймворках. На сайте доступны примеры по работе с Font Awesome. Если еще не пользовались им, то рекомендую взять в работу.
IcoMoon — в этом бесплатном пакете вам будут доступны 490 векторных иконок. Если вам не терпеться посмотреть на доступные иконки.
Linearicons — менее богатый пакет на количество иконок (всего 170 иконок для бесплатной версии). В принципе есть все базовые иконки для веб-разработчика.
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
Шрифты иконки для сайта
Шрифты иконки ► Furniture fill icons
Набор мебельных шрифтов иконок в количестве 50 штук, в комплекте предоставлена различная мебель, иконки предлагается скачать бесплатно, добавить на свой сайт и использовать для дополнения и улучшения дизайна.Название: Furniture fill icons | Категория: Мебель иконки | Просмотров: 8767 | Загрузок: 594
Шрифты иконки ► Cottage Icons
Бесплатные шрифты иконки Cottage Icons для сайтов дачной тематики, включают в себя 50 иконок с фигурками демонстрирующими атрибуты дачи и садового инвентаря.Название: Cottage Icons | Категория: Хобби иконки | Просмотров: 8769 | Загрузок: 483
Шрифты иконки ► Baby
Набор шрифтов иконок детской тематики в количестве 50 штук для установки и использования на сайте, иконки доступны для бесплатного скачивания и применения.Шрифты иконки ► Tools
Набор шрифтов иконок слесарных и строительных инструментов в количестве 21 штуки, все иконки доступны для бесплатного скачивания и применения на сайте.Шрифты иконки ► Sport Icons
Шрифты иконки для сайта спортивной тематики Sport Icons состоящей из 193 иконок на тему спорта, Вы можете скачать комплект бесплатно для применения на сайте.Название: Sport Icons | Категория: Спорт иконки | Просмотров: 8766 | Загрузок: 596
Шрифты иконки ► Weather Icons
Полезный набор шрифтов иконок на тему погоды Weather Icons, погодные шрифты в количестве 42 штук можно скачать бесплатно и установить на сайте.Название: Weather Icons | Категория: Погода иконки | Просмотров: 8768 | Загрузок: 536
Шрифты иконки ► Faces Smileys
Бесплатный набор из 20 шрифтов иконок со смайлами Faces Smileys, иконки со смайликами имеют небольшой вес и могут пригодиться на сайте для дополнения дизайна.Название: Faces Smileys | Категория: Смайлы иконки | Просмотров: 8766 | Загрузок: 515
Шрифты иконки ► Pictonic
Социальные шрифты иконки для установки на сайт, всего используется 266 иконок соц сетей которые можно скачать совершенно бесплатно и применить на сайте.Шрифты иконки ► Social Icon Font Set
Большой пак социальных шрифтов иконок в количестве 100 штук для сайта, все их можно скачать бесплатно одним файлом и установить на свой сайт.Шрифты иконки ► Hand drawn cooking
Комплект из 55 шрифтов иконок Hand drawn cooking на тему кухни, в наличии столовые приборы, кулинарные блюда и другая кухонная принадлежность, все иконки можно скачать бесплатно.Название: Hand drawn cooking | Категория: Кухня иконки | Просмотров: 8767 | Загрузок: 530
иконок шрифтов — 1793 бесплатных векторных иконки
- Авторы
- Пакеты
- Дополнительные инструменты
Прочие товары
Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрацииИнструменты
Образец значка Создавайте шаблоны значков для своих обоев или социальных сетейGoogle Workspace
Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц - английский
- Español
- английский
- Deutsch
- Português
- Français
- 한국어
- Стать автором
- Стоимость
- Бесплатная регистрация
- Войти
Лучшие 20 бесплатных шрифтов с иконками для коммерческого использования
бесплатных иконок для коммерческого использования.
бесплатных шрифтов для коммерческого использования стали очень популярными среди дизайнеров за последние 3 года. Основная причина заключается в том, что вы можете встраивать их как шрифты, и вы можете играть с их цветами, вы можете добавлять тени или легко вращать их, или вы можете добавлять градиент с помощью CSS3, и эти шрифты также имеют формат SVG, поэтому вы можете использовать их в своем дизайне фотошопа или графический дизайн.
01.) IcoMoon
4000+ бесплатных шрифтов для коммерческого использования, генератор иконок. IcoMoon стремится создать и предоставить лучший инструмент для работы с иконками и управления иконками для перфекционистов.В библиотеке иконок IcoMoon представлены только самые лучшие иконки из имеющихся. Все наши значки созданы на основе точной пиксельной сетки. Приложение IcoMoon позволяет создавать и использовать собственные наборы значков во многих различных форматах, включая SVG, Polymer, PDF, XAML, CSH, шрифт значков или простые спрайты PNG / CSS.
ПОДРОБНЕЕ / ОТКРЫТЬ
02.) Fontello
Fontello — это инструмент для быстрой упаковки векторных изображений в веб-шрифты. Считайте это как Twitter Bootstrap, но для изображений.Он создает все необходимое для включения графики на ваши веб-страницы. Кроме того, у fontello есть большая встроенная коллекция произведений искусства с открытым исходным кодом.
Если вам нравятся истории, вот статья о CSS Tricks о том, как был создан fontello.
ПОДРОБНЕЕ / ОТКРЫТЬ
03.) Flaticon
Flaticon — это поисковая система для более чем 16000 векторных иконок с символами, крупнейшая в мире поисковая система бесплатных шрифтов для коммерческого использования. Flaticon предлагает пользователям высококачественный графический дизайн: полностью редактируемые векторы, тщательно отобранные нашей командой дизайнеров, чтобы обеспечить наших пользователей с отличным контентом, который можно использовать как в личных, так и в коммерческих проектах.
ПОДРОБНЕЕ / ОТКРЫТЬ
04.) Fontawesome
Font Awesome предоставляет масштабируемые векторные иконки, размер, цвет, тень которых можно мгновенно настроить, и все, что можно сделать с помощью CSS, font awesome — это полный набор из 675 пиктографических значков для легкой масштабируемой векторной графики на веб-сайтах. .
ПОДРОБНЕЕ / ОТКРЫТЬ
05.) Значок материала
750 Бесплатные глифы с открытым исходным кодом от Google. Значки материалов красиво оформлены, восхитительны и просты в использовании в ваших проектах в Интернете, Android и iOS.Подробнее о материальном дизайне и нашем процессе создания этих значков читайте в разделе «Системные значки» руководства по материальному дизайну.
ПОДРОБНЕЕ / ОТКРЫТЬ
06.) Проект существительное
Тысячи иконок от разных художников. Миллионы используют Noun Project для упрощения общения через границы и по всему миру.
ПОДРОБНЕЕ / ОТКРЫТЬ
07.) Icon Finder
Бесплатные иконки шрифтов для коммерческого использования в разделе веб-сайта Iconfinder предоставляет высококачественные иконки миллионам творческих профессионалов.Мы небольшая международная команда, базирующаяся в прекрасном городе Копенгаген, некоторые из нас работают удаленно. Вместе с увлеченным сообществом дизайнеров иконок мы создаем самый популярный в мире сайт иконок.
ПОДРОБНЕЕ / ОТКРЫТЬ
08.) Круглые значки
Round Icons — это библиотека премиальных пакетов значков, охватывающих все стили и постоянно обновляемых новыми наборами.
Наши значки созданы, чтобы предоставить графическим и веб-дизайнерам самые уникальные и профессиональные значки, соответствующие вашим потребностям.
Придайте своему веб-сайту, отпечаткам, инфографике и приложениям неповторимый и чистый вид.
с помощью этих универсальных значков в разных стилях и форматах.
ПОДРОБНЕЕ / ОТКРЫТЬ
09.) Icon Sweets
Yummygum тщательно разработал 60 бесплатных векторных иконок Photoshop. Идеально подходит для приложений iPhone и iPad или вашего нового веб-проекта!
ПОДРОБНЕЕ / ОТКРЫТЬ
10.) Умные иконки
Загрузите 1450 премиальных значков бесплатно. SmartIcons выделяется своей способностью стилизовать весь набор или отдельные значки с минимальными усилиями и бесплатные шрифты для значков для коммерческого использования.Чтобы просмотреть список классов для каждого значка, щелкните любой значок в своей коллекции и наведите указатель мыши на имя класса, чтобы найти элемент, который вы хотите стилизовать. Мы заранее определили каждый элемент с семантическим значимым именем класса, поэтому возможности безграничны.
ПОДРОБНЕЕ / ОТКРЫТЬ
11.) Ego Icons
Сделайте свою работу особенной. Значки Ego привносят свежий и футуристический штрих в дизайн ваших приложений.
Прочтите нашу статью на Medium о нашем процессе создания.
Загрузите первые 100 иконок EGO БЕСПЛАТНО, Бонус. Мы сообщим вам, когда будет готов полный набор (3500 иконок)
, и дадим вам скидку 30%!
ПОДРОБНЕЕ / ОТКРЫТЬ
12.) Плоские значки
FlatIcons — это бесплатная программа для создания плоских иконок. Вы можете создать свои собственные лицензионные бесплатные плоские иконки для своих веб-проектов за секунды! Просто выберите форму значка из более чем 2500 доступных и настройте ее в соответствии с вашими потребностями, чтобы загрузить бесплатный плоский значок в формате png.
ПОДРОБНЕЕ / ОТКРЫТЬ
13.) К иконке
Однажды в конце лета в Амстердаме мы работали над проектом для клиента по 3D-печати. Мы боролись с рядом метафор — как мы могли проиллюстрировать глаголы, такие как выравнивание, выдавливание, предварительный нагрев или разрезание? Кроме того, какие метафоры эффективно передают эти глаголы инженерам, работающим на машинах для лазерного спекания? Родилась идея to [icon].
14.) Тип Иконки
Typicons — это бесплатные векторные иконки, встроенные в веб-шрифт для удобного использования в пользовательских интерфейсах, будь то в Интернете или в собственном приложении.
Эта версия значительно улучшает Typicons за счет добавления 220 значков со сплошными и контурными стилями и размещения исходного контента на Github. Чего же ты ждешь? Комбинируйте HTTP-запросы с готовым шрифтом Retina, независимым от разрешения и удобным для чтения с экрана.
Набор иконок доступен на Github, все включено, от исходных файлов в формате SVG до миниатюрного CSS.Вы даже можете использовать этот проект для создания своей собственной версии Typicons! Узнайте больше здесь.
20 лучших бесплатных веб-шрифтов с иконками для веб-дизайнеров | Набор лучших иконок шрифтов
Раньше значки и символы в Интернете были представлены в виде изображений; хотя они были совместимы во всех браузерах, они требовали проектирования, оптимизации и обрезки, прежде чем пользователь мог их загрузить и реализовать. Это означало, что всякий раз, когда брендинг веб-сайта менялся, эти крошечные изображения приходилось воссоздавать заново. web Иконочные шрифты , с другой стороны, предлагают новый способ использования иконографии с такой же совместимостью, но гораздо большей гибкостью. Шрифты в основном представляют собой набор символов и включают преимущества, предлагаемые свойствами шрифта CSS.
ШрифтыIcon привлекают внимание и помогают создавать визуально привлекательные веб-сайты с их многочисленными и разнообразными функциями.
Веб-шрифты с открытым исходным кодом позволяют дизайнерам привносить новые смелые инновации в свою типографику, а также в дизайн страниц.Вот некоторые из лучших бесплатных шрифтов для веб-иконок, доступных :
Капитан Икона
Пакет Captain Icon, созданный дизайнером Марио дель Валле, размещен на Github. В нем более 350 векторных иконок, каждая из которых имеет уникальный дизайн и нарисована от руки с нуля. Именно этот факт выделяет этот набор из множества наборов значков, которые мы видим сегодня. Однако он может быть более подходящим для творческих сайтов, чем другие; поскольку значки нарисованы от руки, они могут не подходить, скажем, для сайта здравоохранения или финансовых услуг.
Дрипиконы
Dripicons — это набор из 90 красивых векторных иконок в плоском стиле; он отлично подходит для веб-сайтов и приложений, которым требуются мультимедиа, документация, стрелка, диаграмма и т. д.
Глификоны
Этот набор значков шрифтов дополняет множество различных типов шрифтов, особенно лучшие веб-шрифты Google, приложения iOS или AS X. Хотя существует множество платных наборов, есть также бесплатный набор Glyphicons. В этот набор входят 610 базовых шрифтов и 60 шрифтов для социальных сетей.Бесплатные шрифты Glyphicons выпускаются по непортированной лицензии Creative Commons Attribution 3.0.
октиконы
Ищете простой и легкий иконочный шрифт? Octicons — ваше решение! Octicons — это внутренний пакет, разработанный GitHub. Последняя версия 5.0 и содержит множество значков с несколькими основными символами. Вы можете найти их на сайте GitHub. Они очень удобны для пользователя, и вы можете использовать их практически в любом интерфейсе.
Соса
Значок веб-шрифта Sosa — это специально разработанный шрифт значков, который предоставляется бесплатно для личного и коммерческого использования; теперь он предлагает более 160 иконок.Пользовательский интерфейс, устройства, медиа, погода, инструменты, валюта, Интернет, электронная торговля, социальные сети, элементы управления и т. Д. — вот категории, которые вы можете найти с помощью этого набора значков. Нет никаких ограничений на то, как вы можете использовать шрифты Sosa, просто вы не можете предлагать их для бесплатной загрузки на сторонних доменах.
Обозначения
Набор иконок Typicons хорошо работает для целого ряда сайтов. В нем более 330 уникальных иконок, выполненных в похожем стиле — простые контуры и сглаженные углы. Этот бесплатный пакет доступен на GitHub, что позволяет размещать значки прямо на вашем сайте и вносить любые изменения, которые вы сочтете необходимыми.Типиконы не так хорошо известны, как некоторые другие наборы иконок, но это хороший набор шрифтов. С помощью всего лишь нескольких настроек и добавления фрагментов кода вы даже можете использовать их для iOS.
Zondicons
Zondicons бесплатны, и их очень легко добавить на ваш сайт; однако в них нет архива обновлений, поскольку они не размещены на GitHub. Тем не менее, есть демонстрационная страница, на которой отображаются все примеры, например, какие классы CSS вам потребуются для обеспечения их эффективной работы.Основная ссылка для загрузки Zondicons находится прямо с веб-сайта, поэтому сложно проверить, были ли недавно добавлены новые значки или обновлены существующие. Тем не менее, если дизайн вашего веб-сайта не слишком сложен, вы можете использовать этот набор значков; они просты в использовании и очень естественно вписываются в ваш сайт в общем стиле.
Элегантный значок
Веб-шрифт Elegant Icon — это бесплатный набор, содержащий более 360 иконок, 50 из которых предназначены специально для бизнеса. Стиль иконок изящный и ослепительный, и творческим людям понравится ими пользоваться.Эта векторная графика может сжиматься или расширяться без снижения качества, в результате чего получаются кристально чистые, красивые значки на различных типах дисплеев — даже на сетчатке.
Entypo
Веб-набор значков Entypo не нов, но эти 400+ значков превосходны и являются первоклассными среди бесплатных. Новые значки добавляются периодически, и вы можете легко получить к ним доступ. Шрифты доступны в двух наборах: пакет для социальных сетей и основной пакет.Поэтому, если вам не нужны значки социальных сетей, вам нужно только взять основной пакет и уменьшить размер файла шрифта. Они выпускаются под одинаковой лицензией Creative Commons.
MFG Labs
MFG Labs выпустили собственный набор шрифтов для веб-иконок, абсолютно бесплатный и размещенный на GitHub, что означает легкий доступ! Он довольно новый и содержит обычные форматы веб-шрифтов, созданные с помощью Unicode PUA в CSS. Поскольку он полностью семантичен для разных браузеров, он помогает минимизировать конфликты с другим кодом CSS.Отличительный стиль значков MFG Labs выделяет его в отдельный класс; их можно использовать с любыми типами веб-сайтов — личными, брошюрами, электронной коммерцией или любыми другими.
Иониконы
Ionic Framework пользуется огромной популярностью у разработчиков нативных приложений, особенно когда дело касается Интернета и мобильных приложений. Опираясь на эту популярность и успех, команда Ionic создала собственный набор веб-шрифтов для иконок, назвав его Ionicons. Да, они на 100% бесплатны, размещены на GitHub и могут быть добавлены прямо на ваш сайт, когда вы используете версию CDN таблицы стилей.Если вы новичок, который раньше не работал с иконками, это прекрасно. Эти простые в настройке значки могут стать вашим трамплином для работы с другими более сложными веб-шрифтами.
Font Awesome
Это популярный выбор многих дизайнеров, так как это один из оригинальных веб-шрифтов, который существует уже много лет. Он признан первым ключевым шрифтом для значков с открытым исходным кодом и регулярно обновляется инновационными значками. Бесплатно загружается на GitHub, текущая версия не 4.7. у него есть некоторые большие преимущества, такие как возможность поддержки непосредственно в CSS и полная масштабируемость. Он также обладает широкими возможностями настройки, позволяя вам поиграть с фоновыми градиентами, тенями, цветами и всем остальным, что вы хотите изменить, с помощью чистого CSS3. Это зрелые и надежные наборы иконок — вы знаете, что в ближайшее время они не исчезнут со сцены.
IcoMoon
IcoMoon предоставляет два бесплатных набора шрифтов для иконок, которые отлично смотрятся с шрифтами с засечками и без засечек.490 скругленных шрифтов для значков сплошных цветов составляют первый набор; второй набор носит другое название — Linearicons. Он содержит около 170 линейных шрифтов и распространяется под лицензией Creative Commons Attributions Sharealike.
Фонтелло
Вы ищете шрифт иконок, который прост, но привлекает и поражает? Что ж, ваш поиск заканчивается на Фонтелло. Он предлагает более 1000 шрифтов со значками, которые готовы к использованию Retina. Они доступны на GitHub, что упрощает доступ к ним.Fontello создает архив с документами, шрифтами и файлами CSS.
Iconshock
Один из самых известных и популярных наборов шрифтов для значков, Iconshock содержит более 110 000 уникальных значков, предлагаемых наборами по 300. Различные наборы обычно включают бизнес, графику, бухгалтерский учет, мультимедиа, веб-дизайн, сети, базы данных и так далее.
Значок карты
Если вы хотите создать потрясающую и динамичную карту, значок карты сделает это за вас.Он предлагает более 700 масштабируемых значков векторной графики, которые вы можете использовать для отметки местоположения, навигации и многого другого на своих картах. Он отлично подходит для Google Maps API и Google Places API и делает маркеры карты Google динамическими, предлагая контроль над формой, размером, цветом и значком либо с помощью параметров объекта маркера, либо с помощью нотаций CSS и SVG.
Иконки дизайна материалов
Материальный дизайн от технологического гиганта Google радикализовал подход к UI / UX в сети, что привело к созданию нескольких новых ресурсов и фреймворков.Одним из них является шрифт значка материального дизайна, который является совершенно бесплатным и размещен на GitHub для легкого доступа. Как и следовало ожидать от Google, это огромный пакет, предлагающий более тысячи значков, которые включают широкий набор функций интерфейса. Вы можете не только свободно использовать их в любом проекте, над которым работаете, но и можете настраивать эти значки. Если вы работаете с рекомендациями Google по материалам в Интернете, нет ничего лучше.
Фундамент
283 различных шрифта на выбор: это то, что предлагает текущая версия шрифтов значков Foundation (V 3).Поскольку шрифты округлые, они хорошо сочетаются с различными шрифтами с засечками. Конечно, вы можете использовать предыдущие версии шрифтов; однако, если вы ищете единообразия, мы рекомендуем использовать последнюю версию.
Девиконс
Devicons — один из новейших доступных наборов веб-шрифтов, который отлично подходит для брендинга и технических логотипов. В наборе представлены все виды логотипов, которые только можно придумать, от крупных игроков до новых логотипов CMS. Они идеально подходят, если вы создаете сайт, на котором требуются векторные технологические логотипы.Это огромный набор, совершенно бесплатный.
Socialio
Как следует из названия, Socialio — это набор из 74 значков социальных сетей, которые лучше всего подходят для социальных целей; однако вы можете создать весь сайт с помощью этих удивительно ярких значков.
Заключение
Когда дело доходит до наборов шрифтов для веб-иконок, даже бесплатных, которые доступны для использования, возникает позор изобилия; просто изучите несколько дизайнов, чтобы определить, какие из них лучше всего подходят для вашего проекта.
Acodez IT Solutions — компания, занимающаяся веб-дизайном в Индии, предлагающая все виды решений для веб-дизайна, начиная от карусельных сайтов и заканчивая ультрасовременными сайтами, которые есть лишь у нескольких гигантов. Мы также являемся агентством SEO, базирующимся в Индии, предлагающим нашим клиентам все виды решений SEO и входящего маркетинга. Для получения более подробной информации вы можете посетить наш сайт или связаться с нами.
Ищем хорошую команду
для вашего следующего проекта?
Свяжитесь с нами, и мы дадим вам предварительную бесплатную консультацию
по веб-стратегии и мобильной стратегии, которая наилучшим образом соответствует вашим потребностям.
❍ Иконка Шрифт
Создавать собственные шрифты
Используя приложение IcoMoon, вы можете создавать свои собственные шрифты, которые содержат только те значки, которые вам нужны.
Pixel Perfect Результаты
В отличие от аналогичных сервисов, приложение IcoMoon учитывает размеры сетки значков и генерирует четкие, точные результаты. При правильном выравнивании размер шрифта, который вы устанавливаете, будет напрямую соответствовать размеру значков.
Бесплатные иконки, бесплатное приложение
Приложение IcoMoon бесплатное. Вам не нужно ничего платить или возвращать кредит за его использование. Библиотека IcoMoon содержит множество высококачественных наборов иконок. Все эти значки созданы в виде сетки и оптимизированы для использования с приложением IcoMoon. Добавьте любой набор, который вы хотите легко просматривать и искать его значки.
Удивительный инструмент для иконографии
Приложение IcoMoon — это усовершенствованный инструмент для создания иконок.Он позволяет сортировать значки, управлять коллекциями значков или делать значки доступными для поиска, добавляя к ним теги. Помимо шрифтов, вы можете создавать значки в PNG, SVG, полимерные значки, PDF, CSH, XAML и CSS-спрайты любого размера и цвета.
Импортируйте собственные векторы
В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы при их импорте.Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.
Работает офлайн
После загрузки в ваш браузер приложение IcoMoon работает в автономном режиме. Когда вы импортируете значок или генерируете шрифт, все происходит локально, в вашем собственном браузере . Ваши значки / шрифты не будут загружены на наши серверы. Вы даже можете загрузить приложение IcoMoon, когда у вас нет подключения, если вы установите его из Интернет-магазина Chrome.
Множественные лигатуры на символ
Вместо того, чтобы назначать вашим глифам отдельные символы, вы можете назначать им разные теги (лигатуры).Эта функция особенно полезна для резервных копий или использования шрифтов на рабочем столе. Узнать больше…
14 бесплатных иконок шрифтов для веб-дизайнеров
Автор: Trevin Shirey, , 28 ноября 2013 г. Тревин — старший директор по развитию бизнеса в WebFX. Он работал над более чем 450 маркетинговыми кампаниями и создает веб-сайты более 20 лет.Его работы были представлены Search Engine Land, USA Today, Fast Company and Inc.Примечание: Перед использованием любого из приведенных ниже значков шрифтов следует ознакомиться с их лицензией и условиями использования.
Дизайн веб-сайта важен для любой компании, которая хочет привлечь клиентов. Наличие подходящих и последовательных шрифтов для иконок — одна из составляющих того, что делает дизайн таким эффективным и успешным. Ваш шрифт может легко стать решающим фактором между клиентом, который решит остаться на вашем сайте, и тем, кто решит уйти.
Ionicons Страница загрузки
2. Шрифт значка Shock (1121 значок)
Полное раскрытие информации: Я основатель семейства веб-сайтов Shock, и этот бесплатный иконочный шрифт был создан моей компанией.
Скачать шрифтShock Icon, страница
Dripicons Загрузить страницу
4. Entypo (250 иконок)
Entypo Загрузить страницу
5. Соса (160 иконок)
Sosa Загрузить страницу
Foundation Icons Скачать страницу
7.Типики (308 иконок)
Typicons Загрузить страницу
The Elegant Icon Загрузка шрифта Страница
Иконки карты Загрузить Страница
Лигатурные символы Загрузить страницу
Heydings Иконки Скачать Страница
Fontawesome Страница загрузки
13. Signify (38 иконок)
Signify Страница загрузки
14. PulsarJS (73 иконки)
PulsarJS Загрузить страницу
Как использовать иконочные шрифты
Узнайте, как использовать шрифты значков, прочитав эти руководства:
Реальный совет
WebFX — это агентство цифрового маркетинга с полным спектром услуг, которое предлагает все, от построения ссылок SEO до маркетинга в социальных сетях.Знание того, как успешно использовать иконочные шрифты, выделит вас среди конкурентов. Стоимость веб-дизайна не должна стоять между вами и вашим бизнесом, привлекающим новых клиентов. WebFX предлагает отличные советы по отраслевому дизайну веб-сайтов, например веб-дизайну для отелей.
Если вы хотите усовершенствовать свой сайт или узнать больше, вы можете связаться с нами по телефону 888-601-5359, чтобы поговорить со стратегом.
Svg Icon Font Packs Загрузки
Версия0.100 Эксклюзивная бета-версия 2005 года, пререлиз
Товарный знакНесоленое масло является товарным знаком Gilles Pegel.
Авторские праваCopyright (c) Жиль Пегель, 2005. Все права защищены.
ЛицензияTrypoe-mail: [email protected]: //www.trypo.com Уважаемый покупатель, Благодарим вас за приобретение стандартной пользовательской лицензии * для несоленого шрифта Butter. Применяются следующие правила: указанный выше шрифт продается вам по стандартные условия, применимые к большинству профессиональных типографских программ (так называемые «шрифты»).Запрещается копировать, переименовывать, перепродавать, распространять или изменять исходные рисунки, содержащиеся в файле гарнитуры, любым способом. Если вы планируете использовать шрифт, указанный выше, на более чем 5 CPUS в вашей компании, вам будет необходимо перейти на многопользовательскую лицензию. Мы будем рады ответить на любые ваши вопросы, просто свяжитесь с нами по электронной почте или посетите веб-страницу / форум trypo. Важно Это мой первый выпуск шрифта, поэтому он еще не на 100% идеален и будет обновлен. Любое обновление несоленого шрифта Butter будет отправлено вам по электронной почте бесплатно.Если вы заметите какие-либо отклонения или возникнут проблемы с нашим шрифтом, немедленно сообщите нам об этом. Имея лицензию на этот шрифт, мы продаем вам право использовать защищенный фрагмент графического дизайна для ваших целей. Вам не разрешается передавать купленный шрифт третьим лицам, а не вашим друзьям, коллегам или студентам. При использовании служб вывода пленки или других средств допечатной подготовки, принтеров или аналогичных служб убедитесь, что люди, выполняющие эту работу, знают, что шрифты trypo не являются бесплатными или условно-бесплатными, и что для них незаконно использовать его помимо работы, которую они делают для вас, или хранить ее в своих системах данных, за исключением целей резервного копирования в сочетании с работой, для которой вы их наняли.Мы рекомендуем клиентам указывать названия использованных шрифтов trypo.
