Иконочные шрифты для сайта: Иконочный шрифт: подборка из 30 бесплатных — Вебджем.рф

Содержание

Иконочный шрифт: подборка из 30 бесплатных

Статья обновлена: 18.07.2018

Автор: Мясоедов Анатолий

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

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

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

П.С. В этом списке вы не найдете всем полюбившийся и получивший огромное распространение шрифт Awesome. Это сделано намеренно =). Он заслуживает отдельного поста.

Подборка: 30 бесплатных иконочных шрифтов

1. Dashicons – The Official WordPress myasoedov Icon Font (197 иконок)

2. Linea Iconset (730+ иконок)

3. Themify Icons (320 иконок)

4. GitHub’s Octicons (178 иконок)

5. iOS7 Vector Icons (100 иконок)

6. Genericons (120 иконок)

7. Stroke 7 Icon Font (170 иконок)

8. Stroke Icons (80 иконок)

9. Icon-Works (134 иконок)

10. Devicons – An Iconic Font For Developers (123 иконок)

11. 77 Essential Icons (77 иконок)

12. Tonicons Outline Icons (200 иконок)

13. Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 иконок)

14. The Elegant Icon Font (360 иконок)

15. Iconia – An Icon Font With Three Styles: Regular, Circle and Cut (113 иконок)

16. Metrize Icons – A Metro-Style Icon Font (300 иконок)

17. Icon Pack – A Line-Styled Icon Font from Petras Nargela (40 иконок)

18. Ionicons – The Huge Icon Font for the Ionic Framework (528 иконок)

19. Batch Icons (300+ иконок)

20. IcoMoon Free Pack (450 иконок)

21. MFG Labs Web Icon Set (120 иконок)

22. Foundation Icons (140 иконок)

23. Ligature Symbols (250+ иконок)

24. OpenWeb Free Icon Font (54 иконок)

25. Sosa Free Icon Font (120 иконок)

26. One Div (91 иконок)

27. PW Drawn Icon Font (80+ иконок)

28. Premium Pixels Mini Icons (80 иконок)

29. Fontelico Font (30 иконок)

30. Genericons – An Icon Font from WordPress (123 иконки)

Спасибо за прочтение

Вы можете сказать «Спасибо» 2 простыми способами:

Оцените статью:
Загрузка…
Напишите что именно не понравилось, я не буду публиковать ваш комментарий, но обязательно добавлю информацию: Может мало фото? Может нет той информации, которую вы искали?

Напишите мне!

Комментарии 2

Иконочные шрифты для сайта

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

Также рекомендую:
Самыми популярными являются иконки Font Awesome. Но бывает и их недостаточно. Ниже Вы найдете подборку сервисов с иконочными шрифтами, которые можно использовать вместо Font Awesome.
1. StackIcons
StackIcons содержит более 60 иконок различных современных брендов. Вы можете использовать иконки как с прозрачным фоном, так и в круге, квадрате или квадрате с закругленными углами. Также иконкам можно изменять цвета.
2. Twemoji Awesome
Это иконки от социальной сети Twitter. Подключается также всё достаточно просто. Если возникают сложности с их установкой — скачайте пример и посмотрите как это реализовано там. Иконки можно применять из этой шпаргалки
. Только вместо нижнего подчеркивания необходимо ставить дефис.
3. Octicons
Иконки от проекта GitHub. Здесь представлено более 170 иконок, которые Вы можете смело использовать на своих сайтах. Подробный процесс установки описан здесь.
4. Material Design Iconic Font
Данный сервис предоставляет значительно больше иконок, которые сгруппированы в 15 разных категорий. Чтобы установить их себе на сайт, Вам достаточно лишь подключить файл Material-Design-Iconic-Font.ttf, а затем использовать специальные коды символов из этой таблицы. Все действия над данными иконками аналогичны действиям со шрифтами в CSS.
С Уважением, Юрий Немец
Бесплатные шрифты с иконками
Шрифты с иконкам вместо стандартного алфавита содержат разные символы, например, стрелочки, лупу, карандаши и многие другие иконки. Применяются, по сути, как альтернатива бесплатным пиктограммам. Как и для всех подобных нестандартных решений подключение осуществляется через CSS @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. На сайте проекта найдете описание, возможность поиска по всему архиву и другую инфу.

В принципе, я не первый раз сталкиваюсь со шрифтами с иконками (в фотошопе пригодились пару раз), но никогда не думал о их применении в веб-приложениях и сайтах. А ведь это реально удобно и эффективно. Думаю, данные наборы шрифтов разработчикам должны понравится.
Почему пора отказаться от иконочных шрифтов
От автора: всего за год до того, как в 1991 году была запущена первая веб-страница, Microsoft начала поставлять, пожалуй, самый известный шрифт иконок, Wingdings. Однако прошло почти 22 года, прежде чем шрифты иконок стали тенденцией дизайна в Интернете.
Введение CSS-правила @font-face позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, такие как Wingdings, можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, шрифты иконок фактически были способом добавления векторных иконок ваш веб-сайт.
Но шрифты иконок в Интернете с самого начала были в корне несовершенными. И теперь, когда в нашем распоряжении полная поддержка SVG, пора положить конец их использованию раз и навсегда.
Некорректные шрифты иконок
Вспышка нестилизованного контента (FOUC)
При использовании @font-face вы указываете браузеру сделать HTTP-запрос на требуемый файл шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, указанные в разметке, он строит объектную модель документа (DOM) в реальном времени. Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и оборудования пользователя.
В ожидании ресурса шрифта браузер выберет отображение текстового содержимого HTML перед фактическим его получением. Это приводит к появлению нестилизованного содержимого (FOUC). Эти вспышки могут сильно раздражать ваших посетителей. Иконочные шрифты обычно назначают свои глифы кодовым точкам за пределами нормального диапазона, в котором работают большинство обычных шрифтов. Однако, если они этого не сделают, возможно, что случайные символы или глифы появятся вместо ваших значков до того, как шрифт будет полностью загружен.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Примечание. Можно использовать более новые директивы, например, preload, для ресурсов шрифтов, чтобы избежать FOUC. Однако это не решает других проблем, описанных в этой статье, и не рекомендуется.
Доступность
Шрифты иконок, как известно, имеют плохую доступность и могут разочаровать тех, кто полагается на вспомогательные технологии.
Обработка как текст. Браузер рассматривает шрифты как текст, потому что именно такими и должны быть шрифты. С годами программы чтения с экрана становились все умнее, но им все еще трудно различать, что такое разборчивый текст, а что — пиктограмма. Большинство программ чтения с экрана будут читать вслух текст, вставленный с помощью CSS, поэтому, когда они сталкиваются с иконками, они могут озвучить как-то «непроизносимо» или могут полностью пропустить фрагмент текста.
Переопределения таблиц стилей. Люди с нарушениями зрения часто используют настраиваемые таблицы стилей для переопределения стилей по умолчанию для посещаемых ими веб-сайтов, чтобы упростить их использование. Это может включать изменение цветовых схем, увеличение размера шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки неконтекстным образом, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заставит ваши иконки полностью исчезнуть, что потенциально сделает ваш веб-сайт непригодным для использования.
Невозможность предоставить метаданные. Процесс внедрения шрифта иконок в Интернете требует использования псевдоэлементов ::before или ::after. Семантически псевдоэлементы ::before и ::after предназначены для добавления декоративного содержимого к существующему элементу. Для шрифта иконок это имеет смысл, если иконка используется в контексте с другим элементом. Однако во многих случаях иконка используется в качестве основного элемента. Например, «х» для «закрыть» или «домик» для возвращения на главную страницу. Сами по себе эти иконки не предоставляют никакой семантической информации об их содержании; вы не можете обозначить их или описать их напрямую.
Размер и поддерживаемость
Шрифты иконок — это затратный актив. Каждый раз, когда посетитель загружает ваш шрифт, он загружает все иконки, которые вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Уже сам по себе этот факт делает работу со шрифтами иконок сложными и довольно раздражающими. Если ваш шрифт содержит 200 иконок, а вы используете 10 из них, вы заставляете посетителей загружать 190 иконок, которые они никогда не увидят. Это ухудшит впечатления посетителя из-за увеличения времени загрузки и увеличения FOUC.
Поддержание шрифта иконок означает добавление и удаление иконок по мере необходимости, чтобы минимизировать размер шрифта и последующих таблиц стилей. Это также означает, что каждый раз, когда вы обновляете шрифт, вам необходимо аннулировать кеш посетителей и заставлять их повторно загружать шрифт.
Ухудшение визуального качества
Все современные браузеры и операционные системы в той или иной степени используют сглаживание текста. Текстовое сглаживание не зависит от того, состоит ли ваш шрифт из букв и цифр или пиктограмм. Это может иметь негативные побочные эффекты с точки зрения визуального качества, особенно если вы складываете глифы для создания многоцветных значков. Ваши иконок могут выглядеть размытыми или смещенными.
Трудности стилизации / позиционирования
Шрифты иконок — это в первую очередь шрифты, а во вторую — иконки. Это означает, что ваши иконки наследуют правила CSS, такие как font-size, letter-spacing, line-height и т.д. Это может сделать позиционирование иконки более сложным и менее последовательным. Кроме того, глифы шрифтов значков являются монохромными, что означает, что любые стилистические изменения, которые вы вносите, влияют на весь глиф.
SVG спешат на помощь!
С выпуском версии браузера Microsoft Edge на базе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками в отношении масштабирования от Internet Explorer и до Chromium Edge. И угадайте, что? SVGs являются удивительным решением для веб-иконок!
Иконки просто работают
Данные изображения SVG хранятся непосредственно в HTML-документе. Как только браузер обрабатывает его, он отображает его. Вам не нужно ждать завершения других HTTP-запросов, как в случае со шрифтами иконок.
Лучшая доступность
SVG имеют встроенные функции доступности, которые дают им преимущество перед использованием шрифтов иконок.
Они семантически являются элементами изображения.
Предоставить метаданные очень просто. Просто укажите элемент title или desc в контейнере SVG. А поскольку SVG — это просто элементы HTML, вы можете легко использовать атрибуты ARIA, например aria-labelledby.
Поддерживаемость
Если сравнивать один к одному, коллекция из 100 SVG по сравнению с WOFF2 из 100 иконок будет больше. Однако преимущества SVG легко перевешивают реализацию шрифтов иконок.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Используя SVG, вы будете включать только те иконки, которые требуются для этой отдельной страницы, непосредственно в код. Самый эффективный способ сделать это — использовать элемент defs для однократного определения иконок, а затем ссылаться на них с помощью этого элемента use. Вы также можете напрямую встроить иконки SVG, однако, если вы используете одну и ту же иконку несколько раз на одной странице, вы просто увеличиваете общий вес страницы.
Примечание. Если вы создаете одностраничное приложение (SPA), обязательно изучите правильные методы разделения кода, чтобы уменьшить размеры пакетов.
Еще одно преимущество заключается в том, что вам не нужно поддерживать шрифт и поддерживающие его файлы CSS за пределами сайта. Обычной практикой для тех, кто использует шрифты иконок, является выбор нужных иконок и восстановление меньшего шрифта, включающего только эти иконки. Использование SVG иконок позволяет делать это в базе кода без необходимости создания ресурсов шрифтов во внешних инструментах.
Резкие изображения
SVG — это прямые векторные изображения. Методы сглаживания, используемые вашим браузером или операционной системой для текста, не влияют на SVG, и ваши иконки будут заметно четче.
Полный контроль CSS
С SVG у вас есть доступ ко всем тем же элементам управления CSS, что и со шрифтом, и многому другому! Вы можете напрямую указать определенные части иконки, состоящей из нескольких частей, и применить к каждой из них свой стиль. Вы также можете использовать элементы управления CSS, специфичные для SVG, например, свойство stroke. Кроме того, на SVG не влияют текстовые правила CSS.
Прочие соображения
Чтобы полностью поддержать использование SVG на вашем сайте, убедитесь, что вы следуете таким рекомендациям:
Оптимизируйте свои SVG-изображения — пропустите SVG-изображения через оптимизатор, чтобы уменьшить размер. (Большинство, если не все библиотеки иконок, которые предлагают пакеты SVG, делают это по умолчанию.)
Включите сжатие — настройте сервер для отправки всех текстовых ресурсов (HTML, JS, CSS) с помощью Brotli (или GZIP).
Эффективное кэширование — установите соответствующие заголовки кеширования, чтобы посетители загружали файлы только по мере их изменения. Поскольку ваши SVG-файлы будут частью ваших файлов HTML и / или JS, вам нужно, чтобы посетители загружали их снова, только если они изменятся.
Начните работу с иконками SVG
Большинство основных библиотек иконок предлагают пакеты SVG библиотеки. Две популярные библиотеки иконок, Material Design Icons и Font Awesome, имеют пакеты, которые можно установить через npm.
Если вы используете фреймворк, многие из основных библиотек иконок также выпустили пакеты, так что вы можете начать работу довольно быстро. Например, если вы используете React, для иконок Material Design и Font Awesome есть простые решения:
Иконки Material Design- @mdi/react & @mdi/js
import Icon from ‘@mdi/react’; import { mdiCoffee } from ‘@mdi/js’; const element = <Icon path={mdiCoffee} size={1} />;

import Icon from ‘@mdi/react’;
import { mdiCoffee } from ‘@mdi/js’;

const element = <Icon path={mdiCoffee} size={1} />;
Font Awesome — @fortawesome/react-fontawesome & @fortawesome/free-solid-svg-icons
import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’; import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’; const element = <FontAwesomeIcon icon={faCoffee} />;
import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’;
import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’;

const element = <FontAwesomeIcon icon={faCoffee} />;
Заключение
Продолжение использования шрифтов иконок наносит ущерб интересам ваших посетителей и отнимает у вас время. Заменяя существующую реализацию шрифтов иконок на SVG, вы помогаете людям использовать вспомогательные технологии, улучшая качество, четкость и надежность иконок и сокращая время на поддержку устаревших ресурсов. И если вы случайно наткнулись на эту статью, пытаясь определить, следует ли вам использовать шрифт иконок или нет, я надеюсь, что ответ теперь очевиден.

Автор: Michael Irigoyen
Источник: www.irigoyen.dev
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Иконочные шрифты для сайта
Иконочные шрифты — это шрифты, каждый символ которого представлен иконкой.
До появления иконочных шрифтов дизайнеры и верстальщики делали сайты с использованием растровых иконок. Это было красиво, но довольно неудобно. Современный Интернет меняется и на место растровых иконок пришли векторные иконки, выполненные в виде шрифтов.
Принцип работы таких шрифтов прост, к web странице, с помощью CSS стилей, подключается дополнительный файл шрифта. Веб-мастер в стилях сайта указывает свойства иконок (размер, цвет, тень и прочие) и в разметке страницы пишет специальные теги, на месте которых и появляются иконки.
Преимущества
множество уже готовых наборов иконок с общей стилистикой;

удобный поиск по иконкам дают сами авторы наборов;

иконочные шрифты одинаково четко отображаются на всех экранах устройств;

можно выбрать цвет иконки и ее размер;

можно манипулировать фоном иконки, например выставить цвет или залить изображением;

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

к иконке можно применить современные стили, такие как тени, трансформации и анимация.

Примеры готовых иконочных шрифтов для сайта
fortawesome.github.io. Самый популярный шрифт Font Awesome. В него входит 519 иконок самой разной тематики.
fontello.com — этот сервис который позволяет объединять иконки веб-шрифтов для использования в собственных сайтах.
pictonic.co/free Pictonic — необычный иконочный шрифт. Это «логотипный» иконочный шрифт, где собрано более 220 логотипов известных сервисов, браузеров, операционных систем, языков программирования и т.д. Среди символов конечно нет русскоязычных сервисов.
icomoon.io. Бесплатный пакет иконок IcoMoon в настоящее время содержит 490 векторных иконок.
octicons.github.com Еще один небольшой пакет бесплатных иконок GitHub’s icons.
typicons.com
Иконочные шрифты IcoMoon
Вы здесь: Главная — HTML — HTML Основы — Иконочные шрифты IcoMoon

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

Раз это шрифт, то можно использовать стили для его редактирования — изменять цвет, масштабировать без потери качества, добавлять тени.

Векторизация растровых изображений

Обычно к макетам, сделанных на заказ, дизайнеры прикладывают иконки в формате SVG. Что делать если вам попался на верстку макет без специально подготовленных векторных иконок? Вставлять их на сайт в растровых форматах PNG или JPG, не вариант, из-за пикселизации на больших разрешениях. Сделаем экспорт иконок в PNG и займемся их векторизацией. Для векторизации воспользуемся онлайн-конвертером pngtosvg.

Шаг 1: Выберите изображение в формате PNG или JPG на своем компьютере.

Шаг 2: Выберите количество палитр для вашего выходного векторного файла.

Шаг 3: Установите опцию Упростить, чтобы сгладить вывод.

Шаг 4: Нажмите «Создать»

Как создать иконочный шрифт?

Для того чтобы создать свои собственные CSS шрифты с иконками, вам необходимо перейти в раздел IcoMoon App, загрузить SVG изображения и нажать на кнопку «Generate Font».

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

В свойствах обязательно отметьте поддержку старых браузеров.

Далее скачиваете (кнопка Download) и распаковываете архив.

Как установить иконочные шрифты на сайт?

В данном архиве есть папка Fonts, содержащая шрифт icomoon в различных форматах. Загружаете эту папку на хостинг. В папке с архивом вы увидите файл style.css. Копируете все стили из этого файла и вставляете в основной файл стилей у вашего сайта. Есть и альтернативный вариант — переименовать этот файл и подключить его отдельным файлом стилей. Будьте внимательны с путями до папки Fonts, ведь в вашем проекте может быть другая структура расположения папок.

В скаченном архиве еще есть demo.html, откуда можно взять код иконки и вставить в нужное место на странице.
<span></span>
Как установить иконочные шрифты на WordPress?

Загрузим по FTP папку Fonts в тему WordPress.

В админке WordPress перейдем во вкладку -> «Внешний вид» -> «Редактор тем» -> «Таблица стилей (style.css)» и перенесем стили в начало основного файла стилей. Для вывода иконок на сайте, вставляем тег span с определенным классом в нужное место исходного кода.

Библиотека IcoMoon насчитывает 5500+ бесплатных иконок.
Создано 26.06.2020 10:14:58

Михаил Русаков

Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:

Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Icon Fonts или SVG?
Графические иконки — главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать 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 и большинство библиотек иконочных шрифтов.
Сравнение Icon Fonts и SWG
Настало время сопоставить SVG и иконочные шрифты по нескольким характеристикам.

Размер

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

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

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

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

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

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

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

Гибкость

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

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

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

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

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

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

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

Вывод
До сих пор в среде разработчиков нет единого мнения о том, что лучше использовать — иконочные шрифты или SVG. Суть в том, что зачастую многое зависит от поставленных задач и проекта в целом.
Но все же сейчас чаще всего используют SVG — у этого формата — разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами.
В то же время иконочные шрифты станут хорошим решением для проекта с большим количеством иконок в одном стиле.
Голосов: 536 | Просмотров: 2604
14 бесплатных графических шрифтов для веб-дизайнеров
Примечание: Перед использованием любого из перечисленных ниже графических шрифтов вы должны прочитать их лицензию и условия использования.
Дизайн веб-сайта важен для любой компании, которая хочет привлечь клиентов. Наличие подходящих и последовательных шрифтов для иконок — одна из составляющих того, что делает дизайн таким эффективным и успешным. Ваш шрифт может легко стать решающим фактором между клиентом, который решит остаться на вашем сайте, и тем, кто решит уйти.
Ionicons Страница загрузки
2.Шрифт Shock Icon (1121 значок)
Полное раскрытие информации: Я основатель семейства веб-сайтов Shock, и этот бесплатный иконочный шрифт был создан моей компанией.
Скачать шрифт
Shock Icon, страница
Dripicons Страница загрузки
4. Entypo (250 иконок)
Entypo Страница загрузки
5. Соса (160 иконок)
Sosa Страница загрузки
Скачать
Foundation Icons
7.Типики (308 иконок)
Typicons Страница загрузки
Шрифт
The Elegant Icon Загрузка шрифта
Иконки карты Загрузить Страница
Лигатурные символы Страница загрузки
Heydings Icons Скачать страницу
Fontawesome Страница загрузки
13. Signify (38 иконок)
Signify Страница загрузки
14. PulsarJS (73 иконки)
PulsarJS Страница загрузки
Как использовать шрифты со значками
Узнайте, как использовать шрифты значков, прочитав эти руководства:
HTML для использования шрифтов значков (css-tricks.com)
Зачем и как использовать иконочные шрифты (vanseodesign.com)
Как использовать иконочные шрифты на своем веб-сайте (designmodo.com)
Реальный совет
WebFX — это агентство цифрового маркетинга с полным спектром услуг, которое предлагает все, от SEO-ссылок до маркетинга в социальных сетях. Знание того, как успешно использовать иконочные шрифты, выделит вас среди ваших конкурентов. Стоимость веб-дизайна не должна стоять между вами и вашим бизнесом, привлекающим новых клиентов. WebFX предлагает отличные советы по отраслевому дизайну веб-сайтов, например, по веб-дизайну для отелей.
Если вы хотите улучшить свой сайт или узнать больше, вы можете связаться с нами по телефону 888-601-5359, чтобы поговорить со стратегом.
❍ Перейти Премиум
Приложение IcoMoon сохраняет каждое изменение и состояние приложения в браузере локально. Вы также можете вручную сохранять / загружать файлы проекта как файлы JSON. Чтобы узнать больше, прочтите документацию.
Для более простого и быстрого использования сгенерированных шрифтов IcoMoon загружает и предоставляет ссылку, подходящую для разработки.По умолчанию ссылка, назначенная вашему проекту / шрифту, изменится через 24 часа и будет сгенерирована новая. Посмотреть видео-демонстрацию
Вы можете подписаться на нашу премиальную услугу, чтобы получать постоянные ссылки. Эта функция значительно упрощает разработку, поскольку каждое изменение, которое вы вносите в свой шрифт, будет применяться « на лету », и вам не нужно будет обновлять свой CSS.
Ссылки для быстрого использования, предусмотренные базовым планом, идеально подходят для разработки. Чтобы получить дополнительные ссылки, подходящие для хостинга, рассмотрите безлимитный тариф.
По умолчанию приложение IcoMoon хранит все локально, в браузере. Если вы очистите кеш браузера, вы можете потерять эти данные. Став премиум-участником, ваши проекты будут безопасно храниться в вашей учетной записи, что позволит вам получать к ним доступ с разных устройств / браузеров. Мы также делаем периодические резервные копии этих данных.
Подписавшись на безлимитный план IcoMoon, вы сможете легко разместить любое количество значков (в формате шрифтов и SVG) с любым количеством запросов на Amazon Amazon CloudFront.Используя эту службу, вам не придется беспокоиться о сжатии, настройках CORS, кэшировании заголовков или правильных типах MIME. Мы позаботимся обо всем этом за вас.
Примеры файлов, размещенных на Amazon CloudFront: WOFF2, TTF, SVG, EOT. Вы можете использовать curl для проверки их заголовков:
curl -H "Origin: http://google.com" --head --verbose https: // d1azc1qln24ryf.cloudfront.net/4/IcoMoonApp/icomoonapp.woff
Получите полный возврат средств в течение 15 дней после первой покупки. Никаких вопросов не было задано.
Вы должны авторизоваться перед покупкой. Вы можете использовать кредитную / дебетовую карту или счет PayPal. С вас взимается только один раз. Чтобы продлить подписку, вы можете сделать еще одну покупку, войдя в свою учетную запись. Количество дней, за которые вы платите, добавляется к оставшимся дням на вашем счете.Мы не будем взимать с вас автоматические платежи, но вы получите уведомление по электронной почте до истечения срока действия вашего премиум-плана. Чтобы получить счет, свяжитесь с нами после совершения покупки.
Есть вопросы? Воспользуйтесь нашей контактной формой.
12 лучших бесплатных шрифтов для веб-дизайнеров — csshint
Иконочные шрифты — это круто. иконочных шрифтов становятся популярными и новейшими трендами веб-дизайна в наши дни.и если вы серьезно задумываетесь о производительности сайта, особенно для мобильных устройств, попробуйте создать сайт без изображений и используйте шрифты с иконками.
Иконки — это впечатляющие символьные шрифты, которые в последнее время появляются по всему Интернету. преимуществ использования шрифтов значков : например, вы можете легко изменить размер шрифтов значков, вы можете легко затенять их форму, они могут иметь прозрачные нокауты, вы сможете делать такие вещи, как добавление к ним штрихов с текстом -трисуйте или добавьте градиенты / текстуры с помощью background-clip: text.
, вам не нужно каждый раз открывать Photoshop для обновления цвета или размера значков. Просто легко создавайте собственные шрифты для иконок с помощью Fontastic! Ваши значки можно изменить с помощью CSS. Вы можете сэкономить свое драгоценное время, легко создавая пользовательские шрифты для значков.
, поэтому здесь мы собрали для вас 14 лучших шрифтов с иконками. вы можете легко скачать и использовать в своем следующем проекте.
1. шрифт отличный
источник
2. типовые обозначения
источник
3.материал
источник
4. ионные значки
источник
5.sosa
источник
6.octicons
источник
7. фонд-иконы
источник
8. капитан Икона
источник
9. элегантный значок шрифта
источник
10.entypo
источник
11.лигатурные символы
источник
12. Лист данных
источник
Я надеюсь, что эта статья поможет вам найти лучшие бесплатные иконки для шрифтов. и вам понравился этот пост, так что не забудьте рассказать о нас всему миру. а если мы пропустили ваши лучшие иконки шрифтов? обязательно оставьте нам комментарий ниже. Спасибо
12 лучших бесплатных шрифтов для веб-дизайнеров. typicons, fontawesome, значки материального дизайна, ionicons, sosa, foundation-icons, octicons

20 лучших бесплатных иконок для дизайна пользовательского интерфейса
Когда дело доходит до дизайна пользовательского интерфейса, два основных компонента, которые являются важными аспектами любого веб-проекта, — это бесплатные значки и ресурсы.Хотя вы всегда можете создать свои значки и символы для своих проектов, давайте будем честными — ни у кого из нас нет на это времени.
Вы всегда можете поискать в Интернете и выбрать значки с множества веб-сайтов, потому что, если у вас нет времени на создание, у вас должно быть время для поиска. Нет?
Вздох… ну тогда ладно. Когда вы дизайнер, имея под рукой ресурсы и шрифты, вы можете выполнять свои проекты намного быстрее. Чтобы помочь, мы покопались за вас и составили список из 20 лучших бесплатных шрифтов для иконок для дизайна пользовательского интерфейса, чтобы вы могли создать набор ресурсов, который вы сможете использовать на долгие годы.
Итак, если вы готовы начать, давайте продолжим!
20 лучших бесплатных иконок для дизайна пользовательского интерфейса
Иконочные шрифты — это шрифты, содержащие символы и глифы, а не буквы или цифры. Они довольно популярны среди веб-дизайнеров. В этом посте мы перечисляем некоторые из лучших шрифтов для иконок для дизайна пользовательского интерфейса. Хорошо то, что все эти шрифты для иконок доступны бесплатно. Да, вы правильно прочитали! Дамы и господа, вот 20 лучших бесплатных шрифтов для дизайна пользовательского интерфейса.
20 лучших бесплатных иконок для дизайна пользовательского интерфейса
Набор иконок Trendy Thin Line Icon для Интернета и мобильных устройств
Хотите ли вы создавать значки, календари, этикетки, упаковку или любой другой дизайн — шрифт Trendy Thin Line Icon Kit для Интернета и мобильных устройств от fet — лучший вариант, который идеально впишется практически в любой модный дизайн. 100% векторный шрифт, он полностью редактируется в Adobe Illustrator. Еще одна интересная особенность этого шрифта — все элементы шрифта наложены друг на друга и хорошо организованы.
Иконки Themify
Вдохновленный Apple iOS 7, Themify состоит из более чем 320 пиктограмм, созданных вручную с точностью до пикселя. Идеально подходит для использования в веб-дизайне и приложениях, Themify поставляется с широким набором значков и является обязательным инструментом для веб-дизайнеров и разработчиков. Если вы ищете значки, которые идеально подходят для любого проекта, личного или коммерческого, вам следует обратить внимание на значки от Themify.
Pictypo
Pictypo — это дизайнерский шрифт дингбата, созданный Майклом Парсоном.Этот элегантно оформленный шрифт сочетает в себе закругленный стиль с нормальным интервалом, который можно оптимизировать для больших размеров и размеров плакатов, и поставляется с широким спектром символов и обычных стрелок, которые находят отличное конечное применение в офисных значках или транспортных средствах.
Значок ремикса
Remix Icon — это система с открытым исходным кодом, выполненная в нейтральном стиле. Это идеальный шрифт для дизайнеров и разработчиков, который может использовать их в своих пользовательских интерфейсах. Состоящий из более чем 2200 значков, каждый из них был идеально продуман с единообразием, удобочитаемостью и идеальными пикселями.Созданные Remix Design, значки имеют вид контуров и заполняются стилями в сетке. Универсальность значков ремиксов позволяет использовать их по своему усмотрению для любых личных и коммерческих нужд.
Иконки векторные линии и шрифт
Иногда иметь слишком много чего-то — это хорошо. Набор векторных линейных значков и шрифтов включает 130 векторных линейных значков, которые совместимы с Affinity, Affinity Designer и Adobe Illustrator, и предоставляет вам варианты в нескольких форматах, включая AI, PDF, EPS, AFDESIGN и SVG.Вы также получаете пакет шрифтов значков, который включает файлы TTF, SVG, EOT и WOFF.
Шрифты Wirebet
Доступный с обычным интервалом шрифт Wirebet отлично подходит для создания проектов визуализации или презентаций веб-концепций с использованием графического программного обеспечения или без него. Шрифт можно оптимизировать как для обычного текста, так и для настроек отображения большего размера. Шрифт Wirebet также может служить каркасом, или вы можете просто использовать значки в визуализациях или выделять определенные элементы веб-дизайна, что только помогает повысить его универсальность.
Zondicons
Набор премиальных SVG-иконок, Zondicons, созданный Стивом Шогером, представляет собой сложный шрифт, который идеально подходит для всех, кто хочет создавать цифровые продукты. Этот шрифт, сочетающий харизму и чистую геометрию, был разработан как идеальный вариант с такими функциями, как разборчивость, согласованность и масштабируемость. Благодаря четким краям и гладким углам шрифт помогает сохранять микротекст при использовании.Идеальный выбор для любого пользовательского интерфейса, включая игровые приложения, корпоративные веб-сайты и многое другое.
Шрифты Foundation Icon 3
Набор Foundation Icon Fonts 3, разработанный ZURB, с настраиваемой коллекцией из более чем 275 значков, позволяет настраивать размер, цвет и даже стиль с помощью CSS. Набор, хранящийся в удобном веб-шрифте, является прекрасным примером чистой геометрии. Это в значительной степени связано с тем, что каждый значок был создан в общих формах, таких как треугольники, квадраты, круги и прямоугольники.Благодаря таким функциям, как закругленные углы, толстые линии, а также полная масштабируемость, позволяющая помещаться как в малых, так и в больших размерах, набор Fonts 3 идеально подходит для любого проекта
.
Linea Иконки
Набор иконок Linea Icon включает такие категории, как базовые, музыкальные и другие значки, всего более 750 значков, которые вы можете использовать в своих проектах. В набор входят значки во многих различных форматах, включая SVG, шрифт значков и PNG64.
Каркасные значки
Набор иконок Wireframe, состоящий из более чем 200 линейных иконок, является идеальным вариантом для создания каркасов.Совместимый с Adobe Photoshop, Illustrator и другими, набор включает значки в форматах AI, PDF, PSD и SVG, любой из которых может быть идеальным для любого проекта, над которым вы работаете.
мкм
Разработанный специально для пользовательского интерфейса и состоящий из более чем 100 иконок, набор Micron имеет все основные стили глифов, которые, вероятно, будут использоваться почти в 99% проектов. Каждый значок в этом шрифте разработан с максимальной согласованностью и построен на сетке из 512 единиц и разделен на 16 × 16 ячеек.Его лигатуры придают уникальность и работают в обоих направлениях. Вы также получите шпаргалку, которую можно использовать для быстрого ознакомления.
77 Основные иконки
Разработанный Брином Тейлором, этот шрифт поставляется с пакетом из 77 бесплатных основных значков. Вы можете найти значки в форматах AI, PDF, PSD, PNG и SVG. Используя шрифт, вы можете легко изменить цвет любого значка. Этот шрифт с идеальной точностью до пикселя поставляется с бесконечно масштабируемыми векторами, которые можно использовать для любых личных и коммерческих целей.
Line Flat шрифт + плоский значок линии
Созданный на основе идеи плоского стиля линии, этот изящно стилизованный шрифт может быть оптимизирован для настройки дисплея и плаката. Отличный вариант для использования в плакатах, открытках и этикетках. Шрифт идеально подходит практически для любой инфографики и линейных значков. Шрифт поставляется с набором из 26 значков, относящихся к бизнес-темам и многому другому. PSD-файл имеет прозрачный фон и многослойные смарт-объекты, которые можно легко редактировать в Illustrator всего двумя щелчками мыши.
Коллекция искусных шрифтов (24 шрифта)
Crafty Font относится к семейству шрифтов без засечек. Он имеет нормальный моноширинный, сжатый и расширенный интервал, поэтому он идеально подходит для использования в различных конструкциях. В нем есть коллекция из 24 шрифтов, таких как обычный, контурный, в горошек, шеврон, каракули, звезды и другие, которые вы можете оптимизировать для любого размера. Совместим со многими приложениями, включая Photoshop, Illustrator и даже Microsoft Word.
80 мини-иконок (PSD + шрифт Icon)
Доступный в форматах PSD и Icon Font, набор из 80 мини-иконок был создан шведским дизайнером Виктором Эриксоном и состоит из идеальных мини-иконок с разрешением 80 пикселей, которые вы можете использовать в любом дизайнерском проекте, в том числе в пользовательском интерфейсе.
150 обведенных значков — PSD AI SVG Webfont
Созданные Дарио Фернандо 150 обведенных значков — PSD AI SVG Webfont — это простой, но полезный набор значков, включающий PSD, AI, нарезанные форматы SVG. Если вы ищете идеальный значок для веб-сайта, вам стоит обратить внимание на этот шрифт.
Иконки погоды
Шрифт Weather Icons, состоящий из более чем 200 значков погоды в виде значков и стилей CSS, был создан для проектов с темой погоды.Независимо от того, нужны ли вашему проекту высококачественные значки погоды, значки морской тематики или значки метеорологии, это лучший вариант практически для любой темы погоды. Предлагает встроенный API, который совместим с Yahoo Weather, Всемирной метеорологической организацией, OpenWeatherMaps и другими популярными погодными приложениями.
Специальные значки в этом наборе значков включают около 28 фаз Луны и 12 часов на часах. Значки поставляются с файлами OTT и TTF, которые можно легко использовать в дизайнерских приложениях, таких как Photoshop, Illustrator и Sketch.Еще одна интересная особенность этого шрифта — это свобода использования его стиля CSS, который помогает масштабировать, вращать, переворачивать, добавлять тени и даже изменять цвета значков.
Бесплатные Иконки Шрифт
The Free Icon Set — это готовый для сетчатки и легко стилизуемый шрифт. Обладая высокой масштабируемостью и функциями настройки, шрифт хорошо подходит для разработки практически любого проекта, от личного до коммерческого.
Captain Icon — 350 бесплатных векторных иконок
Если вы хотите создавать невероятные мобильные и веб-дизайны, тогда вам стоит обратить внимание на шрифт Captain Icon.Шрифт Captain Icon с более чем 350 векторными значками, которые можно оптимизировать до любого размера без потери качества, доступен в форматах EPS, PSD, PNG, SVG и веб-шрифтов. Это идеальный выбор для использования в широком диапазоне категорий, таких как дизайн, спорт, социальные сети, офис, погода и многое другое.
Набор иконок MFG Labs
Этот готовый к сетчатке глаза шрифт состоит из векторов, и его можно легко встроить на веб-сайт или в приложение с помощью Webfont и CSS. Шрифт MFG Labs Icon, легко масштабируемый на экранах сетчатки или мобильных дисплеях, поставляется с частным использованием Unicode, чтобы избежать любых конфликтов с существующими в настоящее время символами.
20 лучших бесплатных шрифтов с иконками для дизайна пользовательского интерфейса
Существует так много замечательных шрифтов с иконками, и поэтому бывает довольно сложно выделить лучшие из них. Шрифты, которые мы здесь перечислили, являются лучшими для любого из ваших проектов, в зависимости от конечного приложения. Вы можете выбрать один или несколько из нашего списка лучших бесплатных шрифтов для значков в соответствии с вашими предпочтениями и сразу же начать работу над своим проектом пользовательского интерфейса.
Статьи по теме
Большой список плоских иконок и иконочных шрифтов
Иконочные шрифты потрясающие.Помимо того факта, что они должны быть одноцветными, они лучше, чем использование изображений в качестве значков во всех смыслах. Но что вы выберете? Существует множество различных наборов. Я попытаюсь собрать их всех здесь и постоянно обновлять (этот пост уже обновлялся несколько раз).
Pictos

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

Набор символов
уникален тем, что он превращает слова в значки. Напишите слово «сердце» и получите. Это работает через OpenType, типографскую функцию современных браузеров.
Современные пиктограммы

v1 распространяется бесплатно на Font Squirrel.v2 оплачивается вместе с полным набором по цене 25 долларов или отдельными иконками по цене от 0,50 доллара.
Пиктонический

Номер 2586
Стоимость Плата за иконку, или 199 долларов
Pictonic также предлагает размещенную службу значков и предлагает уникальные цены (0,59 доллара США за значок).
StateFace

StateFace имеет все 50 штатов США в виде значка шрифта. Когда они вам нужны, они нужны вам.
Геобатс

GeoBats — это иконка с изображением стран мира.GeoBats находится на DaFont.com, и стоит выполнить поиск по «иконке» там, чтобы увидеть другие бесплатные вещи, которые у них есть.
iconSweets 2

Также имеет бесплатную предшественницу.
Эрлер Дингбатс

Значительное улучшение стандартных дингбатов.
Типограмма

CleanIcons

Метеоконы

По погоде!
Ecqlipse 2

Под ними маленькие тени (не совсем «плоские»).Очень маленький предшественник.
Heydings Иконки

IcoMoon

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

Gedy Rivera Social

Фонд Иконки

Номер 47 + несколько других мини-наборов
Стоимость Бесплатно
Может использоваться с Zurb Foundation или без нее.
Fico

Моноширинный.
Веб-символы

НаписатьСоциальный

В частности, только иконки социальных сетей.Они заявляют о «миллиардах», что явно не так.
Entypo

ClickBits

Номер ~ 400
Стоимость 12–49 долларов
Набор различных шрифтов в зависимости от типа (например, стрелки, значки, круги и т. Д.)
Font Awesome

Разработан для использования с Twitter Bootstrap. Другими словами, это переработанная версия бесплатной версии Glyphish, с которой она поставляется.
Социальные сети JustVector

Только социальные сети.
PulsarJS

Flexi Social

Только социальные сети.
Рафаэль

Соса

Бесплатно, но они принимают пожертвования на главной странице.
Пиконик

Номер 8 комплектов по 96 штук
Стоимость 29 $ за комплект
Стоимость только иконок в виде графики отличается, но шрифты разбиты на 8 наборов.Похоже, что покупать именно те наборы, которые вам нужны, — заноза в заднице, поскольку они просто измельчены до четных чисел. Если вам нравится набор, вам, вероятно, лучше купить один из наборов.
Дот Ком

Лучше всего достать его из DaFont, а затем запустить через Font Squirrel.
Стедиконы

Также есть Vol. 1 (312 нарисованных от руки иконок) и Vol. 2 (60 миниатюрных произведений искусства), которые являются не шрифтами, а плоскими иконками.
Типиконы

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

Номер 1,600+
Стоимость 25–99 долларов 90 430
У них есть пара меньших наборов наборов, или вы можете стать участником для доступа ко всем из них по цене меньше двух наборов.
Рондо

Социальный значок шрифта.
Геомиконы

Номер 100+
Стоимость 16 $ за комплект
Поставляется в двух наборах: один состоит из твердых фигур, а другой — из штрихов.
Пиконс

Номер 100+
Стоимость 9,90–59 долл. США
Различные наборы разных размеров и стилей по разной цене, в том числе и не плоские.
Символы

Номер ~ 500
Стоимость 5–43 долл. США 90 430
Один большой набор с парой маленьких дополнительных упаковок.
Биксель

Сбор средств, похоже, закончился, но значки все еще продаются. Я считаю, что это только PNG, а не векторные, и я также не уверен, автоматически ли вы получите 40 дополнительных значков пакетов.
Вкладки

Номер 745
Стоимость 10–60 долларов
Бесплатные обновления.
Пикседы

Также имеет набор без шрифтов с большим количеством значков, чем входит в набор шрифтов.
Нежное лицо

Бесплатно, если используется для личных или общественных сайтов.
Глифиш

Номер 400
Стоимость Бесплатно — 25 $
Набор из 200 штук одного размера бесплатно или набор из 400 штук двух размеров за 25 долларов.
Глификоны

Номер 350
Стоимость Бесплатно — $ 49
Бесплатно для личных и общественных сайтов или платите за бесплатные и другие форматы.
Проект существительного

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

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

Поставляется с PSD, SVG и PNG
Gcons

Открытый исходный код
Пиксельный

Редактировать iPhone UI

Номер 160
Стоимость 69–189 долларов
189 $ дает вам векторный PSD.
Простота

Picas

Номер 250
Стоимость 10–25 долларов
Доступна пара бесплатных пакетов предварительного просмотра.
Гельветиконы

Номер 600+
Стоимость 159–499 долларов
Эко ИКО

Мэтью Скилз.
Бранкич1979 Иконки

Кутиконы

Автор Vaibhav.
Роуминг Дизайн

Только для личного пользования.
IconEden Glyph

Аналогичный набор в виде штрихов вместо сплошных фигур.
UIcons

Версия
@ font-face «скоро» и, скорее всего, будет небольшим набором оригиналов.
Джигсоар

Бесплатно с указанием авторства.
Космо Базовый

Webalys

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

Перекошенные значки

Углерод

Брокколидрия

Шарлотта Свифт. Кажется, что он удален из Интернета, но живет в некоторых наборах шрифтов для значков.
Значок Minia

Автор Egemen Kapusuz.
Шелкконс

Автор Vaibhav.
105 петель

Автор Pranav.
Разработчик WPZOOM

Перо

Fontelico

Открытый исходный код и краудсорсинг («мы создадим 1 иконку на каждые 50 долларов»). Часть проекта Fontello.
Picto Foundry Icons

Метриконы

На основе Windows 8.
Pixicon

Иконки Mobile Pro

Стилистика

Номер 115
Стоимость 26 долларов.20 — 262 долл. США
Pixiconz

Рисованные значки

PictoPro

Каждый набор (контурный или сплошной) стоит 15 долларов или оба по 25 долларов.
Минииконы

Другая информация
Убедитесь, что вы используете их с правильной семантической / доступной разметкой.
Несколько причин, почему шрифты со значками великолепны.
IcoMoon — фантастическое приложение для настройки, сопоставления и создания собственного шрифта значков с использованием всего необходимого.
Fontello использует несколько бесплатных наборов значков шрифтов и позволяет вам выбирать символы и применять сопоставления по своему усмотрению. Подобно IcoMoon — проще, но меньше возможностей.
Иероглиф — Создать значок шрифта из каталога векторных (SVG) файлов
Glyphs — редактор шрифтов для всех.
20 лучших бесплатных веб-шрифтов с иконками для веб-дизайнеров | Набор лучших иконок шрифтов
Раньше значки и символы в Интернете были представлены в виде изображений; хотя они были совместимы во всех браузерах, они требовали проектирования, оптимизации и обрезки, прежде чем пользователь мог их загрузить и реализовать.Это означало, что всякий раз, когда брендинг веб-сайта менялся, эти крошечные изображения приходилось воссоздавать заново. web Иконочные шрифты , с другой стороны, предлагают новый способ использования иконографии с такой же совместимостью, но гораздо большей гибкостью. Шрифты в основном представляют собой набор символов и включают преимущества, предлагаемые свойствами шрифта CSS.
Шрифты
Icon привлекают внимание и помогают создавать визуально привлекательные веб-сайты с их многочисленными и разнообразными функциями.
Веб-шрифты с открытым исходным кодом позволяют дизайнерам привносить новые смелые инновации в свою типографику, а также в дизайн страниц.Вот некоторые из лучших бесплатных шрифтов для веб-иконок, доступных :
Капитан Иконка
Пакет Captain Icon, созданный дизайнером Марио дель Валле, размещен на Github. В нем более 350 векторных иконок, каждая из которых имеет уникальный дизайн и нарисована от руки с нуля. Именно этот факт выделяет этот набор из множества наборов значков, которые мы видим сегодня. Однако он может быть более подходящим для творческих сайтов, чем другие; поскольку значки нарисованы от руки, они могут не подходить, скажем, для сайта о здравоохранении или финансовых услугах.
Дрипиконы
Dripicons — это набор из 90 красивых векторных иконок в плоском стиле; он отлично подходит для веб-сайтов и приложений, требующих мультимедиа, документации, стрелок, диаграмм и т. д.
Глификоны
Этот набор значков шрифтов дополняет множество различных типов шрифтов, особенно лучшие веб-шрифты Google, приложения для iOS или AS X. Хотя существует множество платных наборов, есть также бесплатный набор Glyphicons. В этот набор входят 610 базовых шрифтов и 60 шрифтов для социальных сетей.Бесплатные шрифты Glyphicons выпускаются под непортированной лицензией Creative Commons Attribution 3.0.
Octicons
Ищете простой и легкий иконочный шрифт? Octicons — ваше решение! Octicons — это внутренний пакет, разработанный GitHub. Последняя версия 5.0 и имеет множество значков с несколькими основными символами. Вы можете найти их на сайте GitHub. Они очень удобны для пользователя, и вы можете использовать их практически в любом интерфейсе.
Соса
Шрифт веб-иконок Sosa — это специально разработанный графический шрифт, который можно бесплатно использовать в личных и коммерческих целях; теперь он предлагает более 160 шрифтов со значками.Пользовательский интерфейс, устройства, медиа, погода, инструменты, валюта, Интернет, электронная коммерция, социальные сети, элементы управления и т. Д. — вот категории, которые вы можете найти с помощью этого набора значков. Нет никаких ограничений на то, как вы можете использовать шрифты Sosa, просто вы не можете предлагать их для бесплатной загрузки на сторонних доменах.
Обозначения
Набор значков Typicons подходит для целого ряда сайтов. В нем более 330 уникальных иконок, выполненных в похожем стиле — простые очертания и сглаженные углы. Этот бесплатный пакет доступен на GitHub, что позволяет вам размещать значки непосредственно на вашем сайте и вносить любые изменения, которые вы сочтете необходимыми.Типиконы не так хорошо известны, как некоторые другие наборы иконок, но это хороший набор шрифтов. С помощью всего лишь нескольких настроек и добавления фрагментов кода вы можете использовать их даже для iOS.
Zondicons
Zondicons бесплатны, и их очень легко добавить на ваш сайт; однако в них нет архива обновлений, поскольку они не размещены на GitHub. Однако есть демонстрационная страница, на которой отображаются все примеры, например, какие классы CSS вам потребуются, чтобы убедиться, что они работают эффективно.Основная ссылка для загрузки Zondicons находится прямо с веб-сайта, поэтому сложно проверить, были ли недавно добавлены новые значки или обновлены существующие. Тем не менее, если дизайн вашего веб-сайта не слишком сложен, вы можете использовать этот набор значков; они просты в использовании и очень естественно вписываются в ваш сайт в общем стиле.
Elegant Icon
Веб-шрифт Elegant Icon — это бесплатный набор, содержащий более 360 иконок, 50 из которых предназначены специально для бизнеса. Стиль иконок изящный и ослепительный, и творческим людям понравится ими пользоваться.Эта векторная графика может сжиматься или расширяться без снижения качества, в результате чего получаются кристально чистые и красивые значки на различных типах дисплеев — даже на сетчатке.
Entypo
Веб-набор значков Entypo не нов, но эти 400 + значков превосходны и являются первоклассными среди бесплатных. Новые значки добавляются периодически, и вы можете легко получить к ним доступ. Шрифты доступны в двух наборах: пакет для социальных сетей и основной пакет.Так что, если вам не нужны значки социальных сетей, вам нужно только взять основной пакет и уменьшить размер файла шрифта. Они выпускаются под одинаковой лицензией Creative Commons.
MFG Labs
MFG Labs выпустили собственный набор шрифтов для веб-иконок, абсолютно бесплатный и размещенный на GitHub, что означает легкий доступ! Он довольно новый и содержит обычные форматы веб-шрифтов, созданные с помощью Unicode PUA в CSS. Поскольку он полностью семантичен для разных браузеров, он помогает минимизировать конфликты с другим кодом CSS.Отличительный стиль значков MFG Labs выделяет его в отдельный класс; их можно использовать с любыми типами веб-сайтов — личными, брошюрами, электронной коммерцией или любыми другими.
Иониконы
Ionic Framework пользуется огромной популярностью у разработчиков нативных приложений, особенно когда дело касается Интернета и мобильных приложений. Опираясь на эту популярность и успех, команда Ionic создала собственный набор веб-шрифтов для иконок, назвав его Ionicons. Да, они на 100% бесплатны, размещены на GitHub и могут быть добавлены прямо на ваш сайт, когда вы используете версию CDN таблицы стилей.Если вы новичок, который раньше не работал с иконками, это прекрасно. Эти простые в настройке значки могут стать вашей ступенькой к работе с другими более сложными веб-шрифтами.
Font Awesome
Это популярный выбор многих дизайнеров, поскольку это один из оригинальных веб-шрифтов, который существует уже много лет. Он признан первым ключевым шрифтом для значков с открытым исходным кодом и регулярно обновляется инновационными значками. Бесплатно загружается на GitHub, текущая версия не 4.7. у него есть некоторые большие преимущества, такие как возможность поддержки непосредственно в CSS и полная масштабируемость. Он также обладает широкими возможностями настройки, позволяя вам поиграть с фоновыми градиентами, тенями, цветами и всем остальным, что вы хотите изменить, с помощью чистого CSS3. Это зрелые и надежные наборы иконок — вы знаете, что в ближайшее время они не исчезнут со сцены.
IcoMoon
IcoMoon предоставляет два бесплатных набора шрифтов для иконок, которые отлично смотрятся с шрифтами с засечками и без засечек.490 закругленных шрифтов для значков сплошных цветов составляют первый набор; второй набор носит другое название — Linearicons. Он содержит около 170 линейных шрифтов и распространяется под лицензией Creative Commons Attributions Sharealike.
Фонтелло
Вы ищете шрифт иконок, который прост, но привлекает и поражает? Что ж, ваш поиск заканчивается на Фонтелло. Он предлагает более 1000 шрифтов со значками, которые готовы к работе с сетчаткой. Они доступны на GitHub, что упрощает доступ к ним.Fontello создает архив с документами, шрифтами и файлами CSS.
Iconshock
Один из самых известных и популярных наборов шрифтов для значков, Iconshock содержит более 110 000 уникальных значков, предлагаемых наборами по 300 штук. Различные наборы обычно включают бизнес, графику, бухгалтерский учет, мультимедиа, веб-дизайн, сети, базы данных и так далее.
Значок карты
Если вы хотите создать потрясающую и динамичную карту, значок карты сделает это за вас.Он предлагает более 700 масштабируемых значков векторной графики, которые вы можете использовать для отметки местоположения, навигации и многого другого на своих картах. Он отлично подходит для Google Maps API и Google Places API, а также делает маркеры карты Google динамическими, предлагая контроль над формой, размером, цветом и значком либо с помощью параметров объекта маркера, либо с помощью нотаций CSS и SVG.
Значки дизайна материалов
Материальный дизайн от технологического гиганта Google радикализовал подход к UI / UX в сети, что привело к созданию нескольких новых ресурсов и фреймворков.Одним из них является шрифт значка материального дизайна, который является совершенно бесплатным и размещен на GitHub для легкого доступа. Как и следовало ожидать от Google, это огромный пакет, предлагающий более тысячи значков, которые включают широкий ассортимент функций интерфейса. Вы можете не только свободно использовать их в любом проекте, над которым работаете, но и можете настраивать эти значки. Если вы работаете с рекомендациями Google по материалам в Интернете, нет ничего лучше.
Фундамент
283 различных шрифта на выбор: это то, что предлагает текущая версия шрифтов значков Foundation (V 3).Поскольку шрифты округлые, они хорошо сочетаются с различными шрифтами с засечками. Конечно, вы можете использовать предыдущие версии шрифтов; однако, если вы ищете единообразия, мы рекомендуем вам использовать последнюю версию.
Девиконы
Devicons — один из новейших доступных наборов веб-шрифтов, который отлично подходит для брендинга и технических логотипов. В наборе представлены всевозможные логотипы, которые только можно придумать, от крупных игроков до новых логотипов CMS. Они идеально подходят, если вы создаете сайт, на котором требуются векторные технологические логотипы.Этот набор массивный и совершенно бесплатный.
Библиотека Unicons
Unicons Library — еще один набор креативных иконок с минималистичным и простым дизайном, разработанный Iconscout. Доступно около 4500+ значков в стилях Line, Solid, Thinline и Monochrome. Нажав на кнопку «Изменить цвет», вы можете выбрать цвет или добавить HEX-код вашего бренда. Он покажет все значки в цвете вашего бренда. Эти значки также можно использовать как шрифты для значков. Все, что вам нужно сделать, это добавить одну простую строку кода, и вы сможете легко получить к ней доступ.Это упрощает взаимодействие дизайнеров и разработчиков. Если вы ищете иконки, которые идеально подходят для любого проекта, личного или коммерческого, вам обязательно стоит обратить внимание на униконы от Iconscout.
Socialio
Как следует из названия, Socialio — это набор из 74 значков социальных сетей, которые лучше всего подходят для социальных целей; однако вы можете создать весь сайт с помощью этих удивительно ярких значков.
Заключение
Когда дело доходит до наборов шрифтов для веб-иконок, даже бесплатных, которые доступны для использования, это просто позор изобилия; просто изучите несколько дизайнов, чтобы определить, какой из них лучше всего соответствует потребностям вашего проекта.
Acodez IT Solutions — компания, занимающаяся веб-дизайном в Индии, предлагающая все виды решений для веб-дизайна, от карусельных сайтов до ультрасовременных сайтов, которые есть только у нескольких гигантов. Мы также являемся агентством SEO, базирующимся в Индии, предлагающим нашим клиентам все виды решений SEO и входящего маркетинга. Для получения более подробной информации вы можете посетить наш веб-сайт или связаться с нами.
Ищем хорошую команду

для вашего следующего проекта?
Свяжитесь с нами, и мы дадим вам предварительную бесплатную консультацию
по веб-стратегии и мобильной стратегии, которая наилучшим образом соответствует вашим потребностям.
Настройка библиотек шрифтов значков
Acquia Cohesion позволяет управлять библиотеками шрифтов значков для использования на вашем веб-сайте. Он также предоставляет браузер значков (показанный ниже), чтобы упростить поиск и добавление значков в стили вашего веб-сайта.
Иконочные шрифты не являются изображениями. Их нельзя добавлять к контенту как изображение. Они являются типом шрифта и могут использоваться только в качестве содержимого в стилях псевдоэлементов : до и: после. Если вы хотите добавить значок в качестве содержимого страницы, используйте элемент изображения и загрузите файл .png.
Должен ли я загружать или импортировать шрифты Icon?
При добавлении шрифтов значков в настройки вашего веб-сайта у вас есть выбор «Загрузить» или «Импортировать» шрифты значков. Если вы загрузите шрифты значков, они будут размещены на вашем веб-сервере вместе со страницами и файлами вашего веб-сайта. Если вы импортируете шрифты Icon, они будут размещены на Icomoon или другом хосте.
Выбор между загрузкой (собственный хост) или импортом (хост в другом месте) зависит от уровня трафика вашего веб-сайта, географического местоположения пользователей вашего веб-сайта и других факторов, которые влияют на производительность (скорость) обслуживания шрифтов Icon.Icomoon предоставляет два варианта CDN для обслуживания шрифтов значков, оба из которых обеспечат высокопроизводительное обслуживание значков.
Файлы шрифтов для значков и требования к формату файлов
При добавлении значков шрифтов вам потребуются два элемента:
Файл .zip, содержащий ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2
Файл JSON, содержащий указатель значков в шрифте значков. Это требуется средству выбора значков для отображения значков.
Поддерживаемые генераторы шрифтов значков и форматы JSON
Простой способ создать шрифт значка, включая файл JSON, — это использовать один из этих популярных генераторов шрифтов значков:
Acquia Cohesion поддерживает формат JSON, предоставленный Icomoon и Fontello.Если вы хотите использовать шрифт значка, созданный чем-то другим, вы должны создать свой файл JSON в этом формате.
Варианты размещения шрифтов значков
У вас есть два варианта использования графических шрифтов.
Загрузить на веб-сайт — Шрифт значков будет обслуживаться непосредственно вашим веб-сайтом
Импорт из URL-адреса — Шрифт значков обслуживается с другого хоста, например AWS, или поставщика хоста шрифтов значков, например Icomoon
Загрузка шрифтов иконок в формате Icomoon
Icomoon — популярный генератор шрифтов значков и провайдер хостинга шрифтов значков.Узнайте больше об Icomoon здесь.
Чтобы загрузить шрифт Icon в формате Icomoon:
Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
В иконочных шрифтах нажмите Загрузить значок шрифта Icomoon кнопку
Добавлена новая строка полей, и вы должны увидеть, что Icomoon отображается в поле. Это семейство шрифтов
.
Нажмите кнопку Upload.zip и перейдите к своему.zip-файл, содержащий ваш значок шрифта. Это должно включать ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2. Успешно загруженные файлы шрифтов будут отмечены зеленой галочкой
Введите имя в поле Label
Нажмите Загрузить JSON и выберите свой файл JSON. Вы можете скачать это с Icomoon. Он предоставляет указатель ваших значков и требуется для средства выбора значков. Узнайте больше о начале работы с Icomoon
Щелкните Сохранить.
Загрузка иконочных шрифтов в формате Fontello
Fontello — популярный генератор шрифтов для иконок. Он не предоставляет хостинг шрифтов Icon. Узнайте больше о Fontello здесь.
Чтобы загрузить шрифт Icon в формате Fontello:
Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
В шрифтах значков щелкните синюю кнопку со стрелкой и выберите Загрузить шрифт значка Fontello
Добавлена новая строка полей, и вы должны увидеть, что в поле отображается fontello.Это семейство шрифтов
.
Нажмите кнопку Upload.zip и перейдите к файлу .zip, содержащему ваш значок шрифта. Это должно включать ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2. Успешно загруженные файлы шрифтов будут отмечены зеленой галочкой
Введите имя в поле Label
Нажмите Загрузить JSON и выберите свой файл JSON. Вы можете скачать его с сайта Fontello. Он предоставляет указатель ваших значков и требуется для средства выбора значков.Узнайте больше о начале работы с Fontello
Нажмите Сохранить
Загрузка значков шрифтов в произвольном формате
Если вы не хотите использовать Icomoon или Fontello , вы можете загрузить свой собственный шрифт значков и предоставить файл JSON для средства выбора значков.
Чтобы загрузить шрифт Icon в пользовательском формате:
Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
В шрифтах значков щелкните синюю кнопку со стрелкой и выберите Загрузить собственный шрифт значка
Добавлен новый ряд полей
Щелкните Загрузить.zip и перейдите к файлу .zip, содержащему шрифт значка. Это должно включать ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2. Успешно загруженные файлы шрифтов будут отмечены зеленой галочкой
Введите имя в поле Label
Введите семейство шрифтов в поле Семейство шрифтов . Оно должно совпадать с названием загруженного вами семейства шрифтов
Нажмите Загрузить JSON и выберите свой файл JSON.Это должно быть в таком формате
Нажмите Сохранить
Импорт шрифтов веб-иконок с помощью Icomoon
Icomoon предоставляет услугу премиум-класса, позволяющую управлять размещением вашего значка шрифта на Amazon S3 или CloudFront. Если вы используете эту службу, все, что вам нужно сделать, это добавить URL-адрес размещенного шрифта и загрузить предоставленный файл JSON. Узнайте больше об Icomoon здесь.
Чтобы импортировать значок шрифта из Icomoon:
Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
В значке шрифтов нажмите Импортировать значок шрифта Icomoon кнопку
Введите имя в поле Label .Мы рекомендуем включить на этикетку «Icomoon», чтобы вы знали, что это шрифт Icomoon в будущем.
Введите URL-адрес , где размещен шрифт значка, в поле @import . Если вы используете Icomoon для размещения вашего шрифта, он предоставляется им
Нажмите Загрузить JSON и выберите свой файл JSON. Вы можете скачать это с Icomoon. Он обеспечивает указатель ваших значков и требуется для средства выбора значков
.
Щелкните Сохранить.
Импорт шрифтов веб-иконок с использованием Fontello
Чтобы импортировать иконочный шрифт из Fontello:
Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
В иконочных шрифтах щелкните синюю кнопку со стрелкой и выберите Импортировать шрифт значка Fontello
Появится новый ряд полей
Введите имя в поле Label .Мы рекомендуем включить в этикетку «Fontello», чтобы вы знали, что это шрифт Fontello в будущем.
Введите URL-адрес , где размещен шрифт значка, в поле @import
Нажмите Загрузить JSON и выберите свой файл JSON. Вы можете скачать это с Fontello. Он обеспечивает указатель ваших значков и требуется для средства выбора значков
.
Нажмите Сохранить
Импорт шрифтов веб-иконок в произвольном формате
Если вы не хотите использовать Icomoon или Fontello , вы можете импортировать собственный шрифт значков и предоставить файл JSON для средства выбора значков.
Чтобы импортировать значок шрифта в пользовательском формате:
Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
В шрифтах значков щелкните синюю кнопку со стрелкой и выберите Импортировать пользовательский шрифт значка
Появится новый ряд полей
Введите имя в поле Label
Введите URL-адрес , где размещен шрифт значка, в поле @import
Нажмите Загрузить JSON и выберите свой файл JSON.

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

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

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

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

Номер	~ 500
Стоимость	5–43 долл. США 90 430

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

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