Шрифтовые иконки для сайта: Font Awesome — иконочный шрифт и CSS-инструментарий

Содержание

Font Awesome и Общедоступность

Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк
они влияют на приложения, читающие сайты в слух. Кроме того, если вы используете иконки, чтобы визуально подчеркнуть
или добавить стиль контенту, то в существующем HTML они не должны быть продублированы в описании для вспомогательных
технологий, используемых пользователем. Вы можете убедиться в том, что элемент не читается, добавив ему атрибут
aria-hidden="true".

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

<h2>
  <i aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h2>

<a href="https://github. com/FortAwesome/Font-Awesome"><i aria-hidden="true"></i> View this project's code on Github</a>

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

<dl>
  <dt>
    <i aria-hidden="true" title="Time to destination by car"></i>
    <span>Time to destination by car:</span>
  </dt>
  <dd>4 minutes</dd>

  <dt>
    <i aria-hidden="true" title="Time to destination by bike"></i>
    <span>Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>

<i aria-hidden="true" title="60 minutes remain in your exam"></i>
<span>60 minutes remain in your exam</span>

<i aria-hidden="true" title="30 minutes remain in your exam"></i>
<span>30 minutes remain in your exam</span>

<i aria-hidden="true" title="0 minutes remain in your exam"></i>
<span>0 minutes remain in your exam</span>

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. For instance, simply adding the aria-label attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution.

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
  <i aria-hidden="true"></i>
</a>

<a href="#navigation-main" aria-label="Skip to main navigation">
  <i aria-hidden="true"></i>
</a>

<a href="path/to/settings" aria-label="Delete">
  <i aria-hidden="true" title="Delete this item?"></i>
</a>

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

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

Масштабируемость без потери качества. Никто не ищет буквы побольше для заголовков и буквы поменьше для текста. Ты просто подключаешь шрифт и в css указываешь размер букв. Тоже самое с иконочным шрифтом. Иконку можно сделать любого размера и она всегда будет чёткой.

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

Начнём с бесплатного шрифта с хорошим описанием на русском — fontawesome.ru. Первым делом качаешь и распаковываешь архив. Копируешь папку font-awesome в папку с сайтом. Дальше нужно подключить… Думаешь шрифт? Нет. Подключаеш css файл font-awesome.min.css добавив в <head>

<link rel="stylesheet" href="путь/до/font-awesome/css/font-awesome.min.css">

Иконки fontawesome вставляются следующим образом. Там где должна быть иконка вставляешь строчный элемент, например <i> или <span> и добавляешь к нему класс fa и соответствующий иконке класс. Проще сделать следующим образом. На сайте fontawesome.ru переходишь в меню Иконки и кликаешь по нужной иконке. Попадаешь на страницу где можно скопировать код, который нужно разместить там, где будет иконка. Так выглядит код для Телеграм.

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

Ещё один сайт где можно на халяву хапнуть шрифтовых иконок — fontello.com. Он отличается от fontawesome.ru тем, что можно создать свой набор иконок, а не тянуть все, большая часть которых не пригодиться. Чтобы создать свой набор заходишь на fontello.com. На вкладке Select Icons кликаеш по нужным иконкам. Рядом с красной кнопкой Download пишешь название шрифта и скачиваешь свой иконочный шрифт.

Иконки с fontello вставляются также через добавление класса к строковому элементу. Название классов смотри в файле demo.html(должен быть в скачанном архиве с шрифтом). Дефолтные названия классов можно изменить на вкладке Customize Names.

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

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

Мы рекомендуем связать таблицу стилей в разделе заголовка любой страницы на вкладке «Страницы» перед ее развертыванием на действующем сайте. Возможно, вы можете создать тестовую страницу, скрытую от поисковых систем, или создать тестовый сайт и связать таблицу стилей в разделе заголовка на вкладке «Настройки».

Вместо использования CSS Bootstrap CDN вы также можете загрузить полные файлы шрифтов и CSS из домашняя страница сайта font awesome на Github. Загрузите все папки на свой сайт Weebly, отредактировав исходный HTML / CSS. Убедитесь, что вы загрузили все типы шрифтов и файлов CSS, как показано на рисунке ниже:

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

<i></i> This is a font awesome phone icon.

<i></i> Increases the icon size by 33%
<i></i> Increases the icon size by 2x<
i></i> Increases the icon size by 3x
<i></i> Increases the icon size by 4x
<i></i> Increases the icon size by 5x

<ul>
<li><i></i>List item 1</li>
<li><i></i>List item 2</li>
<li><i></i>List item 3</li>
<li><i></i>List item 4</li>
</ul>

Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

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

Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

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

Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min. css новый путь до папки webfont.

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

div::after{
        display: block;
        content: '\f17b';
        font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
        font-weight: 900;
        width: 100px;
        height: 100px;
        }

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

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

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

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

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

Иконочные шрифты. В этих шрифтах
вместо букв и цифр используются символы.
Они популярны в среде веб-дизайнеров,
поскольку их можно стилизовать при
помощи CSS точно так же, как обычный
текст. Браузеры тоже воспринимают
иконочные шрифты как текст, так что вам
нужно будет нормализовать иконки во
избежание проблем со сглаживанием.
Иконочные шрифты поддерживаются
практически всеми браузерами.
SVG-иконки. Масштабируемая векторная
графика (SVG) это основанный на XML формат
векторной графики, который может
масштабироваться до любого размера
без потери четкости. Эти иконки могут
отображаться при помощи CSS (с тегами
объектов и изображений) или их можно
вставить прямо в HTML.

Jam icons это набор из 896 иконок, сделанных
вручную. Их можно использовать в
веб-проектах и приложениях в виде
SVG-файлов, а можно и в виде шрифта с
заданными CSS-стилями. Размер иконок —
6px, 24px и 32px. Они могут быть как с заливкой,
так и полые.

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

На сайте проекта можно найти полную
документацию и различные руководства
по началу работы и кастомизации продукта.
Чтобы начать использовать иконки, можно
просто вставить ссылку на сайте. Но
Fontisto можно использовать и с менеджерами
пакетов (npm, yarn, bower и т. д.).

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

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

Entypo это набор svg-иконок, тщательно
разработанных несколько лет назад
Дэниелом Брюсом из Швеции. Иконки
превосходны; если говорить о бесплатных,
то они точно лучшие. Всего их в наборе
411, использовать можно бесплатно под
лицензией Creative Commons.

Монетизируется Smashicons несколько иначе,
чем другие библиотеки. Здесь есть платная
подписка, цена — 5 долларов ежемесячно.
За эту сумму вы получаете доступ ко всей
уже существующей коллекции, а также ко
всем иконкам, которые будут выпущены в
дальнейшем.

В коллекции Icons8 вы найдете больше 120
тысяч иконок разных категорий (бизнес,
офис, люди, еда, социальные сети) в разных
стилях (в виде контуров, с заливкой,
полноцветные). Значки разработаны так,
чтобы соответствовали стилю определенной
операционной системы. Есть версии для
Windows, iOS и Android.

Glyphish предлагает несколько разных
наборов иконок. Каждый набор поставляется
в разных форматах, включая PNG, SVG, PSD и AI.
Базовый набор иконок доступен по цене
в 25 долларов, а расширенный обычно стоит
$99. В бесплатной демо-версии вы найдете
50 значков. Все они пригодны для
редактирования.

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

Material Icon это бесплатный набор иконок
от Google. Для обеспечения читаемости и
четкости эти иконки оптимизированы для
всех платформ и дисплеев. Они совершенно
бесплатны и доступны на GitHub. В наборе
вы найдете больше тысячи значков для
самых разных нужд интерфейса.

Набор иконок Linear Icon — один из самых
популярных, как для личного, так и для
коммерческого использования. Имеет
бесплатную и премиальную версию.
Бесплатная версия этого прекрасного
набора поставляется под лицензией
Creative Common.

Файлы иконок доступны в форматах SVG,
PNG, ICO, ICNS и Adobe Illustrator, расширение ранжируется
между 16×16 и 512×512. Если не найдете
подходящих для себя иконок, можно
поработать с лучшими дизайнерами сайта,
чтобы создать значки специально для
вашего бренда.

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

Font Awesome это один из самых популярных
и самых используемых наборов иконок.
Это также дефолтный набор команды
Bootstrap. Среди прочих форматов, иконки
доступны в формате SVG. Лицензия открыта,
иконки можно использовать бесплатно
как в личных, так и в коммерческих целях.

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

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

iconify.design — Этот сервис позволяет подключить к проекту иконки из множества наборов с помощью одного скрипта и используя один синтаксис. Iconify включает более 40 000 иконок из популярных шрифтов и наборов смайликов: Font Awesome 4 и 5, Material Design Icons, IonIcons, Vaadin Icons, Entypo + и многие другие

material.io/resources/icons — Большая коллекция красивых иконок от Google для веб-проектов и приложений Android, iOS. Иконочный шрифт подключается с помощью URL или можно скачать шрифт и подключать локально, также можно скачать SVG и PNG версии иконок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот набор линейных значков поставляется в двух форматах: легко редактируемые векторные изображения, которые можно настраивать в Adobe Illustrator, и веб-шрифт с функцией plug-and-play. Вы получите 130 минималистичных тонких иконок для работы; от значков сообщений до символов камеры и микрофона, как в Microsoft Windows 10.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для тех, кто не в курсе, вы можете думать о иконочном шрифте как о взрослой версии дингбатов… с реальным вариантом использования. Основная идея состоит в том, чтобы взять набор значков или пиктограмм, которые обычно были бы реализованы в виде файла изображения или вектора, а затем преобразовать его в шрифт. По словам Pictonic, для этого тоже есть много причин, поскольку шрифт значка может загружаться на 14% быстрее, чем изображения, и может быть на 90% меньше, чем файлы SVG.

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

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

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

Иконочные шрифты потрясающие. За исключением того факта, что они должны быть одноцветными, они лучше, чем использование изображений в качестве значков во всех отношениях. Но что вы выберете? Есть множество различных наборов. Я попытаюсь собрать их всех здесь и постоянно обновлять (этот пост уже обновлялся несколько раз).

Число	600+
Стоимость	$ 19–249 $

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

Число	2586
Стоимость	Плата за иконку, или 199 долларов

Число	500+
Стоимость	Бесплатно — $ 59

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

Число	47 + несколько других мини-наборов
Стоимость	Бесплатно

Число	~ 400
Стоимость	12–49 долларов

Число	8 комплектов по 96 штук
Стоимость	29 $ за комплект

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

Число	1,600+
Стоимость	25–99 долларов 90 485

Число	100+
Стоимость	16 $ за комплект

Число	100+
Стоимость	9,90–59 долл. США

Число	~ 500
Стоимость	5–43 долл. США 90 485

Число	745
Стоимость	10–60 долл. США 90 485

Число	400
Стоимость	Бесплатно — 25 долларов

Число	350
Стоимость	Бесплатно — $ 49

Число	Зиллион?
Стоимость	на значок или бесплатно с указанием авторства

The Noun Project, вероятно, самая большая коллекция иконок. Это не совсем «набор», а, скорее, огромный архив символов. Вы можете скачать их по одному бесплатно, если согласитесь указать автора, или купите символ, чтобы получить его бесплатно. Вам придется объединить их все вместе, чтобы использовать их в качестве шрифта.Вы можете отправить свой собственный.

Число	160
Стоимость	69–189 долл. США

Число	250
Стоимость	10–25 долл. США 90 485

Число	600+
Стоимость	159–499 долл. США

Число	115
Стоимость	26 долларов.20 — 262 долл. США 90 485

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

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

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

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

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

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

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

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

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

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

Twemoji — проект смайлов с открытым исходным кодом от Twitter. Elle Kasai перенесла его на иконку шрифта под названием Twemoji Awesome . Все имена классов для отображения значков такие же, как в шпаргалке Twemoji, но вам нужно использовать тире вместо подчеркивания, вот и все. Вот пример того, как мы добавляем значок hatching_chick :

Font Diao — это набор значков шрифтов с популярных веб-сайтов или компаний в Китае, таких как Alibaba, Alipay, WeChat, Xiaomi и Weibo.Шрифт может пригодиться, когда вы создаете веб-сайты, предназначенные для аудитории материкового Китая, которая, вероятно, знакома с этим конкретным шрифтом.

Socialicious — это шрифт, созданный исключительно для популярных социальных сетей, таких как Facebook, Twitter и Instagram. Шрифт создан для удобной работы с Bootstrap. Вот пример кода для создания кнопки с классом Bootstrap .btn в сочетании с классами шрифтов.


    Связаться с Linkedin

Шрифтовые иконки для сайта: Font Awesome — иконочный шрифт и CSS-инструментарий

Font Awesome и Общедоступность

Иконки, используемые для декорирования или визуального стиля

Иконки с семантической или интерактивной целью

Если иконка

If an icon represents an interactive element

25+ бесплатных иконических шрифтов (Icon Fonts) для дизайна вашего WordPress сайта

1. Font Awesome

3. Themify Icons

4. Foundation Icon Fonts 3

5.

6. Dripicons

7. Pictonic

8. Sosa

9. Typicons

10. Metrize Icons

11. Ionicons

12. Symbol Signs

13. IcoMoon

14. Batch

15. Socialico

16. Raphaël Icon-Set

17. Entypo

18. MFG Labs Icon Set

19. Ligature Symbols

20. PW Drawn Icon Font

21. Fontelico

22. Feather Icon Set

23. Premium Pixels

24. Rondo Social Icon Font

25. Map Icons

26. Weather Icons

27. Space Icons

Смотрите также:

Шрифтовые иконки — достойная альтернатива растру

Чем иконочный шрифт лучше иконок jpg/png

Как подключить иконочный шрифт fontawesome

Как использовать иконки Font Awesome в Weebly?

Почему вам следует подумать об использовании шрифтовых значков?

Как использовать иконки Font Awesome в Weebly?

Использование Bootstrap CDN

Хостинг на вашем сайте

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

Увеличение размера значка

Неограниченное количество настроек

Как подключить и использовать Font Awesome 5. Полное руководство.

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

Подключение с помощью CDN

Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)

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

Как использовать Font Awesome в HTML

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Как использовать шрифт Font Awesome в Photoshop

Стилизация иконок FontAwesome

Лучшие наборы иконок для веб-разработчиков

Наборы и источники

Flaticon

Jam Icons

Fontisto

Iconmonstr

Библиотека иконок Pixsellz

Entypo

Evil Icons

Streamline icons

Smashicons

Icons8

Icomoon

Glyphish

Ionicons

Angular Material Icons

Linearicons

Feathericons

Iconfinder

The Noun Project

Иконки Fontawesome

Lineicons

Итоги

Веб-шрифты, шрифтовые иконки и спецсимволы

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

Веб-шрифты