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

Главная » Статьи » 10 лучших бесплатных шрифтов иконок (Icon Fonts) для веб-дизайнеров

Icon Fonts — это шрифты, которые вместо букв прописывают специальные символы в виде иконок

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

Думаем, вы уже поняли суть удобства использования

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

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

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

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

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

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

Коллекция значков, созданная дизайнером Mario del Valle. Captain Icon — это совершенно бесплатный проект с открытым исходным кодом, размещенный на GitHub с векторными файлами и веб-шрифтами.

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

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

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

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

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

Пакет полностью бесплатный и также доступен на GitHub. А еще, он может служить для iOS разработок, но с некоторыми незначительными настройками и специальными фрагментами кода.

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

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

Entypo поставляется с более чем 400 значками и лицензией CC sharealike. А так же, вы можете найти их на GitHub.

MFG Labs — это довольно таки новый шрифт в этом списке старичков, который так же имеет свой собственный набор иконок.

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

Ionicons также являются абсолютно бесплатным шрифтом, который доступен на GitHub.

Для новичков, которые раньше не использовали значки в своей работе, это просто потрясающее решение. Так как, они очень просты в настройке и не требуют особых усилий в их использовании.

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

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

Уже давно всем известно, что компания Google ввела новое направление в дизайне — «Material design». А это, в свою очередь, привело к появлению множества новых фреймворков и дополнений, включая пакет шрифтов иконок Material Design Icons.

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

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

Бесплатные шрифты с иконками

Шрифты с иконкам вместо стандартного алфавита содержат разные символы, например, стрелочки, лупу, карандаши и многие другие иконки. Применяются, по сути, как альтернатива бесплатным пиктограммам.  Как и для всех подобных нестандартных решений подключение осуществляется через 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. На сайте проекта найдете описание, возможность поиска по всему архиву и другую инфу.

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

Иконочные шрифты или 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 или иконочные шрифты?

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензия: MIT

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

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

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

Лицензия: MIT

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

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

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 и поделитесь ссылкой на запись в своих соц-сетях:

Иконочный шрифт Font Awesome

Дорогие читатели, приветствую Вас! Рассказать о шрифте Font Awesome я планировал достаточно давно, в своих проектах активно его применяю и сегодня приведу несколько аргументов в его пользу.

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

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

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

Преимущества и недостатки иконочных шрифтов

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

С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:

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

Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:

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

Как подключить шрифт Font Awesome

Первый и самый простой способ подключить шрифт — загрузить его с внешнего CDN, вставляя в секцию <head> следующую строку:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Второй способ заключается в ручной установке шрифта Font Awesome на свой хостинг. Загрузите архив с официального сайта, распакуйте и сохраните папки css и fonts на сервере в каталог font-awesome. Подключается аналогично, меняя лишь путь к файлу:

<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

Как использовать иконки Font Awesome на сайте

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

<i></i>

На официальном сайте проекта есть документация и дополнительные примеры использования.

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

Я покажу как это сделать на примере виджета категорий WordPress. Посмотрите на фрагмент исходного кода:

<div>Рубрики блога</div>
<ul>
	<li>
		<a href="/category/wordpress/">WordPress</a>
	</li>
</ul>

Для класса cat-item я добавил псевдоэлемент before таким образом получилось:

.cat-item:before {
	content: "\f07c";
	font-family: FontAwesome;
	color:#393;
	padding-right:10px
}

Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:

Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.

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

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

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

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

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

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

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

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

Это коллекция уникальных значков с современным минималистским дизайном. Он включает 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. Выберите подходящие темы

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

4. Цвета и индивидуальная настройка

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

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

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

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

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

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

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

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

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

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

Вариант 1: Font-awesome (бесплатный и платный вариант)

Font-Awesome — один из наиболее широко используемых наборов иконок и инструментов для разработчиков.Самым большим преимуществом Font-Awesome является то, что вы можете выбирать из более чем 7.000 иконок! Значки очень настраиваемые, так как они очень удобны для css. Кроме того, их библиотека упростила добавление значка на ваш веб-сайт, и инструмент также прост в использовании.

Кроме того, в Font-Awesome также можно добавить свои собственные значки.

Вариант 2: IconMoon (бесплатная и платная опции)

В библиотеке IcoMoon имеется более 5000 иконок с открытым исходным кодом.Все значки IcoMoon созданы на основе точной пиксельной сетки, что делает значки привлекательными на любом веб-сайте.

С помощью дополнительной функции «Приложение IcoMoon» вы можете создавать свои собственные пакеты значков и использовать их во многих различных форматах, включая SVG, полимер, PDF, XAML, CSH, шрифт значков с лигатурами или старые добрые PNG / CSS-спрайты. IcoMoon предлагает как бесплатные, так и платные варианты.

Вариант 3: Dashicons (бесплатно)

Dashicons — это официальный иконочный шрифт администратора WordPress от 3.8 и далее. С 2018 года новых значков не создавалось, но есть целый список (более 300 значков) на выбор. Иконки очень совместимы с Gutenberg, стандартным конструктором страниц WordPress.

Вариант 4: Размер байта (бесплатно)

Каждый значок размера байта закодирован вручную по сетке 32 × 32 и использует линию SVG для максимальной гибкости стиля; Это означает, что вы можете настроить вес, цвет, размер и форму значков.

Если ваша цель — создать сверхлегкий веб-сайт, то Bytesize — определенно хороший вариант.Все их 84 иконки весят всего 9 КБ в уменьшенном виде и 2 КБ в SVGZ или Gzip.

Вариант 5: Flaticon (бесплатно)

Хороший вариант для уникальных и забавных иконок — Flaticon. В бесплатной версии вы можете загружать до 10 иконок в день. Иконки весят около 16 Кб каждая. Однако недостатком является то, что если вы используете бесплатную версию, вам придется ссылаться на источник значка на своей веб-странице.

Вариант 6: Fontello (бесплатно)

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

Вариант 7: Магазин бесплатных иконок (бесплатно)

Как и Free Icon Shop, это хороший (бесплатный) вариант для уникальных и красивых иконок. Преимущество этого сайта в том, что нет необходимости указывать источник. Недостатком является то, что на веб-сайте используется реклама, которая мешает вам загрузить значки.

Option 8: Iconfinder (бесплатно)

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

Вариант 9: Envato (часто оплачивается)

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

Вариант 10: Emojipedia (бесплатно)

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

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

Использование Font Awesome Icons на вашем веб-сайте

Подпишитесь на нашу рассылку новостей.

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

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

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

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

Шаг 1. Добавьте необходимые включения на свою веб-страницу

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

Шаг 2 — Добавьте выбранный значок

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

Каждый значок использует тег и требует двух классов. Первый, «fa», идентифицирует элемент как значок Font Awesome, а второй, «fa-rss», определяет конкретный значок для загрузки. Чтобы использовать разные значки, просто найдите соответствующий класс CSS.

Шаг 3. Используйте встроенные настройки

Font Awesome имеет ряд встроенных способов настройки вашего значка, таких как увеличение его размера, обеспечение фиксированной ширины значка или добавление анимации к выбранному классу значков.Приведенный ниже код отобразит значок «Поддержка» в нескольких размерах.

Шаг 4 — Добавьте любые уникальные настройки

Поскольку эти значки полностью основаны на CSS, вы можете добавлять свои собственные стили и классы, чтобы полностью заставить значок работать в вашем проекте веб-дизайна. Например, вы можете сделать значок «Фильм» красным.

   < link rel = "stylesheet" href = "fonts.css" />  

   < div aria-hidden = "true" data-icon = "& # x67;">  < / div >   

   < span aria-hidden = "true" > < / span>  

  http://www.yoursite.com  "target =" blank "data-icon =" & # x73; ">   

  a.iconlink {
семейство шрифтов: 'youriconfont';
текстовое оформление: нет;
цвет: # 666666;
}
a.iconlink: hover {
текстовое оформление: нет;
цвет: # 999999;
}  

  
          Копировать
    
  

   

<стиль>
    .my-custom-icon-class: before {
        content: "\ e13a"; / * Добавляет глиф, используя номер символа Unicode * /
    }
 
  

   
 
 
 

<стиль>
    .k-icon-32 {
        размер шрифта: 32 пикселя; / * Устанавливает размер значка 32 пикселя * /
    }

    .k-icon-48 {
        размер шрифта: 48 пикселей; / * Устанавливает размер значка 48 пикселей * /
    }

    .k-icon-64 {
        размер шрифта: 64 пикселей; / * Устанавливает размер значка в 64 пикселя * /
    }
 
  

   
 

<стиль>
    .colored-icon {
        цвет: зеленый;
    }