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

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

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

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

Как собрать шрифт с иконками

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

UPD. Появилась более новая версия сборки

Зачем это делать, есть же фонтелло

Есть много сервисов, которые собирают шрифт из загруженных свг-файлов. Зачем придумывать что-то своё?

• Чтобы случайно не сломать шрифт. Если забыть иконку, которую уже выдавал и не загрузить в фонтеллу, то она не попадет в новый шрифт и где-то в интерфейсе пропадет иконка.
• Подойдет, если дизайнеров несколько . Если дизайнеров в команде несколько, то нужна синхронизация между ними. Было бы круто, если бы каждый мог добавлять в шрифт иконки и не сломать чужой результат.
• Легко встраивается в ваш CI-процесс.
• Не всех устраивает внешний сервис. Внешний сервис может быть недоступен, он может внезапно обновиться, стать платным, и вообще не все готовы отдавать наружу свои иконки.
• Разработчику сразу формируется и less-файл. Обмениваться кодами символов неудобно, они генерируются автоматически и могут измениться, использовать css-класс надежно, он не поменяется.

Вариант 1. Собираем и отдаём шрифт

Я выложил все необходимые файлы в репозиторий icon-font-public, скачайте его и распакуйте куда-нибудь.

Шаг 1. Настраиваем среду

Все эти заклинания надо произнести один раз, дальше не понадобятся

1) Установить brew. Brew — это такой менеджер пакетов, который легко позволяет ставить программы и библиотеки. Выполнить в терминале команду:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2) С помощью brew установить шрифтообработчики:

brew install ttfautohint fontforge --with-python

3) Установить node.js, скачать тут https://nodejs.org/en/ current-версию.

4) Установить SketchTool
При установленном Sketch выполнить в терминале команду:

/Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

5) Установить grunt

npm install -g grunt-cli

Шаг 2. Сборка файла шрифта

Для сборки шрифт нужно произнести в терминале заклинание:

./build.sh

Если в первый раз не сработает, сделайте скрипт выполняемым:

chmod +x build. sh

В итоге при добавлении иконки нужно будет сделать:

1. Нарисовать иконку.
2. Собрать шрифт: ./build.sh
3. Отдать файл шрифта и less-файл разработчику

Что все это было?

Всё, что описано выше работает так:

1. С помощью SketchTool всё, что может быть экспортировано, экспортируется из скетча в СВГ-файлы.
2. СВГ-файлы, полученные на шаге выше собираются в шрифт. Для этого запускается сборщик шрифта, который все СВГ-файлы собирает в шрифт, конвертирует его в нужный формат и формирует хтмл-страницу с превью.

Вариант 2. Собираем и отдаём шрифт npm-пакетом

Это ещё что такое?

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

Шаг 1. Настраиваем среду

Нужно настроить среду как в первом варианте, и дополнительно настроить локальный npm-репозиторий. Спросите вашего фронтендера как это сделать у вас в команде.

Шаг 2. Сборка файла шрифта

1. Нарисовать иконку.
2. Собрать шрифт: ./build.sh
3. Изменить версию пакета в файле package.json
4. Выполнить команду grunt publish
5. Передать разработчику шифровку «Выпустил пакет версии xxx».

Вариант 3. Собираем и отдаём шрифт нугет-пакетом

К сожалению про нугет ничего не знаю, но если кто-то соберет рабочий вариант, добавлю.

На что обратить внимание при рисовании иконок

При экспорте иконок надо не забыть перевести все в кривые. Чего не должно быть:

• Радиусов скруглений
• Покрашенным рамок
• Текстовых надписей

Если это будет, то иконка может выглядеть в шрифте плохо, даже если в СВГ-файле было всё ок.

Если что-то не работает

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

иконки, иконочный шрифт — Tokar.

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

Вы здесь: Главная — HTML — HTML Основы — Иконочные шрифты IcoMoon

Сегодня мы поговорим о сервисе IcoMoon, который позволяет создавать шрифтовые иконки для различных проектов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В скаченном архиве еще есть demo.html, откуда можно взять код иконки и вставить в нужное место на странице.

Как установить иконочные шрифты на 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.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

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

   Она выглядит вот так: Как создать свой сайт

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

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

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

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

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

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

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

На скриншоте №1 изображены настройки, которые я использую.

1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
2. Начертание шрифта, которое мы будем использовать в своем проекте.
3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
4. Сгенерированный код для подключения Font Awesome с помощью CDN.

Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.

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

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

Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.

После скачивания получаем архив с файлами, как на скриншоте №2:

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

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

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

Переносим папку webfont и файл all.min.css на свой хостинг.

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

У меня это выглядит так:

В папке fontawesome хранится один файл all.min.css

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

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

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

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

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

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

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)

Теперь пишем стили css для элемента before или after:

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

Разберем главные моменты в коде.

3. В свойстве content указываем Unicode.

4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.

5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.

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

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

Смотрите на скриншоте №6:

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

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

Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.

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

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

Бесплатная библиотека шрифтов для иконок с 2100 иконками

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

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

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

Читайте также: Сравнение 3 бесплатных сервисов веб-шрифтов

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

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

Все работает через элемент, который требует два CSS-класса:

1. класс IcoFont по умолчанию
2. класс для каждого типа значка

Например, чтобы добавить значок замка в ваш документ, вы должны добавить что-то вроде этого в свой макет:

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

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

Читайте также: Руководство по: улучшенные и четкие значки пользовательского интерфейса с веб-шрифтами

Используйте иконки шрифтов в WPF

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

2. Введение функции
1. Используйте шрифт ICO вместо простого текста
    
3. Этапы реализации
1. Скачайте онлайн-пакет для сжатия шрифтов Font ICO, например:Алибаба вектор икона Галерея、Font Awesome Vector Icon Library
2. Скачайте сжатый пакет и получите файл шрифта иконки после распаковки
3. Затем скопируйте папку шрифтов в проект, директория (/ fonts / font file)
4. Щелкните правой кнопкой мыши файл и установите «Копировать в выходной каталог» на «Копировать, если новее»
5. Написание стилей ресурсов для пользовательского интерфейса проекта /skin/style.xaml

<Style x:Key="FontAwesome" >
    <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/WPFUI;component/fonts/#FontAwesome" />
</Style>

Комментарий:
WPFUI — это название проекта

6. App.xaml ссылается на стили ресурсов внешнего проекта

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary. MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/WPFUI;component/skin/style.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

7, страница XAML, стиль вызова ресурсов
   

<TextBlock Text="" />

4. Пример дисплея:

1. XAML и CS отображают пример шрифта ICO

2. Таблица сравнения шрифтов ICO, если это XAML, то это & ​​# xf … если это CS, то это \ uf …

Приложение: скачать исходный код

Автор: Сюй Юн Сю
Адрес статьи: http://www.cnblogs.com/sntetwt/p/5635107.html

Этот исходный код заказан и организован Ян Сю
Если вам нужно перепечатать или использовать, пожалуйста, укажите информацию об авторе и источник, чтобы показать уважение к работе других!
Более эффективную и актуальную техническую поддержку см. Здесь: http://www.microsoft-zn.cn

Перепечатано по адресу: https://www.cnblogs.com/sntetwt/p/5635107.html.

14 бесплатных графических шрифтов для веб-дизайнеров

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

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

Ionicons Страница загрузки

2.Шрифт Shock Icon (1121 значок)

Полное раскрытие информации: Я основатель семейства веб-сайтов Shock, и этот бесплатный иконочный шрифт был создан моей компанией.

Shock Icon, страница

Dripicons Страница загрузки

4. Entypo (250 иконок)

Entypo Страница загрузки

5. Соса (160 иконок)

Sosa Страница загрузки

Foundation Icons

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, чтобы поговорить со стратегом.

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

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: 1500000+ иконок и элементов дизайна

СКАЧАТЬ

1. Капитан Икона

Мне больше всего нравится шрифт Captain Icon, созданный дизайнером Марио дель Валле.Это полностью бесплатный проект с открытым исходным кодом, размещенный на GitHub, с векторными файлами и веб-шрифтами.

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

Но я не думаю, что Captain Icon подходит для каждого проекта. Его лучше всего использовать на творческих сайтах, где нарисованный от руки стиль сочетается с макетом.

2. Octicons

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

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

Если вам нужен простой и легкий иконочный шрифт, Octicons вас не подведет.

3. Типиконы

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

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

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

4. Zondicons

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

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

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

5. Entypo

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

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

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

6. MFG Labs

Один из новейших шрифтов в этом списке предоставлен MFG Labs со своим собственным набором значков. Это совершенно бесплатно и размещено на GitHub для всеобщего доступа.

Каждый значок содержит стандартные форматы веб-шрифтов, использующие PUA Unicode в CSS. Это полностью семантически во всех браузерах и помогает уменьшить конфликты с другим кодом CSS.

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

7. Иониконы

Native любят Ionic Framework, и это один из самых популярных вариантов для мобильных приложений. Команда Ionic решила выпустить свои значки в виде веб-шрифта под названием Ionicons.

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

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

8. Font Awesome

Оригинальный веб-шрифт и личный выбор Bootstrap, Font Awesome, пожалуй, окончательный выбор для большинства веб-дизайнеров.

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

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

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

9. Значки материального дизайна

Материальный дизайн Google привнес новый подход к UI / UX в Интернете. Это привело к появлению множества новых фреймворков и ресурсов, включая этот шрифт значка материального дизайна.

Эти значки материалов совершенно бесплатны и доступны на GitHub. Этот набор значков абсолютно массивен: более 1000 значков , охватывающих широкий спектр функций интерфейса.

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

10. Девиконс

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

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

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

Завершение

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

Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

Что такое иконочные шрифты? | Pluralsight

Серьезно, не используйте Icon Fonts

Иконки везде. Эти «маленькие чудотворцы» (как их описал Джон Хикс) помогают нам усиливать смысл интерфейсов, которые мы проектируем и строим.Их популярность в веб-дизайне никогда не была такой высокой; Краткость и универсальность пиктограмм, в частности, делают их идеальным выбором для больших и маленьких дисплеев.

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

Так что неудивительно, что иконочные шрифты стали таким хитом.Иконки, отображаемые через @ font-face , не зависели от разрешения и настраивались всеми способами, которые мы ожидали от текста. Конечно, предоставление значков в виде шрифта определенно было хитростью, но также было полезно, универсально и, возможно, даже немного весело.

Но теперь нам нужно остановиться. Пришло время передать иконочные шрифты в Hack Heaven, где они могут порезвиться с макетами на основе таблиц, пуленепробиваемыми закругленными углами и масштабируемыми заменами Flash Inman. Вот почему…

Устройства чтения с экрана действительно читают эти вещи

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

Они — кошмар, если ты страдаешь дислексией

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

Они вторгаются на газон Emoji

В большинстве случаев мы полагаемся на автоматизированные инструменты, чтобы выбрать, какие символы Unicode назначены для какого значка.Но Unicode также является местом, где живут наши любимые смайлики. Если вы не будете осторожны, они могут сбивать с толку (хотя и забавно). Мой любимый пример: ошибка Etsy «четыре звезды и лошадь». Совсем недавно наш собственный Джейсон Григсби натолкнулся на случайные удары кулаками на сайте ESPN.

Они часто терпят неудачу

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

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

Что еще хуже, многие пользователи никогда не увидят эти шрифты. Opera Mini, которая часто соперничает с iOS Safari по глобальной статистике использования с сотнями миллионов пользователей по всему миру, в большинстве случаев не поддерживает @ font-face .Opera рекомендует избегать шрифтов со значками, если вы хотите поддерживать Opera Mini.

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

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

Вы, наверное, делаете это неправильно

«Но Тайлер», — слышу вы.«Вы полностью проигнорировали шрифты Bulletproof Icon Fonts от Filament Group, вместе с тестами функций и разумными запасными решениями, основанными на содержании».

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

Но вы, вероятно, не сделаете этого.

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

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

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

Лучше уже есть

SVG — это классные для иконок! Это формат векторных изображений с дополнительной поддержкой CSS, JavaScript, возможностью многократного использования, специальных возможностей и многим другим. Было , сделано для такого рода вещей.

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

«SVG нельзя объединять в спрайты».

Они вполне могут. Есть даже действительно отличные инструменты, такие как svg-sprite и IcoMoon, которые могут помочь автоматизировать этот процесс.

«SVG больше по размеру файла».

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

Иногда я слышал, что разрыв все еще слишком велик, когда включены сотни значков. Возникает вопрос: почему вы включаете сотни иконок на каждой страницы?

«По сравнению с этим разметка значка слишком подробна».

Сравним:

Разметка SVG , чуть более , более описательная и семантическая, чем какой-нибудь пустой, скрытый ARIA элемент .

«Браузеры хуже поддерживают SVG».

На момент написания этой статьи глобальная поддержка SVG на 96%… 4% на выше, чем на , чем такой же показатель для @ font-face . Кроме того, SVG намного более доступны, а их резервные варианты намного проще.

«Выбранный нами фреймворк уже имеет иконочный шрифт».

Если бы ваш фреймворк велел вам спрыгнуть с моста, вы бы это сделали?

Не будь «столовым парнем»

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

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

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

Тогда сделай сам.Не будь застольным парнем.

шрифтов Foundation Icon 3 | Детская площадка от ЗУРБ

Как они были построены

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

• Геометрический Все значки состоят из основных форм, таких как треугольники, квадраты, прямоугольники и круги.
• Круглые углы Все значки сделаны с закругленными углами, чтобы они выглядели более мягкими и доступными.
• Толщина линий Для всех значков выбирается более толстая линия, а не тонкая, чтобы значки можно было масштабировать, а также придать им дружелюбный вид, к которому мы стремимся.
• Natural Angles Мы задали эти удельные градусы поворота, чтобы сохранить согласованность как набор.
• Масштабируемость При создании этих значков мы думаем о том, как эти значки будут масштабироваться при малых и больших размерах.

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

Как ими пользоваться

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

Слияние стилей

Очень легко подключить таблицы стилей пакета, чтобы оживить ваш новый значок веб-шрифта. После загрузки шрифтов вы сможете просто объединить файлы foundation-icons.css, и foundation-icons. [Eot / ttf / svg / woff] прямо в Foundation.

Напишите свою разметку

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

Стиль прочь!

Вы можете использовать некоторые замечательные методы CSS, чтобы начать изучение различных стилей. Мы сами придумали несколько, проверьте их:

Скачать шрифты

Мы собрали несколько удобных пакетов загрузки, которые легко впишутся в ваш проект Foundation!

  $ yarn add @ mdi / font -D
// ИЛИ
$ npm install @ mdi / font -D
  

 

импортировать '@ mdi / font / css / materialdesignicons.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'mdi',
  },
})
  

  $ пряжа add @ mdi / js -D
// ИЛИ
$ npm install @ mdi / js -D
  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'mdiSvg',
  },
})
  

 

<шаблон>
   {{svgPath}} 


<сценарий>
  импортировать {mdiAccount} из '@ mdi / js'

  экспорт по умолчанию {
    данные: () => ({
      svgPath: mdiAccount
    }),
  }

  

  $ yarn add material-design-icons-iconfont -D
// ИЛИ
$ npm установить материал-дизайн-значки-значок-шрифт -D
  

 

import 'material-design-icons-iconfont / dist / material-design-icons.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'md',
  },
})
  

  $ пряжа добавить [email protected] -D
// ИЛИ
$ npm установить [email protected] -D
  

 

импортировать 'font-awesome / css / font-awesome.min.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa4',
  },
})
  

  $ yarn add @ fortawesome / fontawesome-free -D
// ИЛИ
$ npm install @ fortawesome / fontawesome-free -D
  

 

импортировать '@ fortawesome / fontawesome-free / css / all.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa',
  },
})
  

  $ yarn add @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D
// или
$ npm install @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D
  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать {библиотеку} из '@ fortawesome / fontawesome-svg-core'
импортировать {FontAwesomeIcon} из '@ fortawesome / vue-fontawesome'
импортировать {fas} из '@ fortawesome / free-solid-svg-icons'

Vue.component ('font-awesome-icon', FontAwesomeIcon)
library.add (fas)

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'faSvg',
  },
})
  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa',
    ценности: {
      отменить: 'fas fa-ban',
      меню: 'fas fa-ellipsis-v',
    },
  },
})
  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать myIconSvg из myIcon.svg

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa',
    ценности: {
      customIconSvg: myIconSvg,
      customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c -0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z ',
    },
  },
})
  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

const MY_ICONS = {
  полный: '...',
  Отмена: '...',
  близко: '...',
  удалять: '...',
  Чисто: '...',
  успех: '...',
  Информация: '...',
  предупреждение: '...',
  ошибка: '...',
  предыдущая: '...',
  следующий: '...',
  checkboxOn: '...',
  checkboxOff: '...',
  checkboxIndeterminate: '...',
  разделитель: '...',
  Сортировать: '...',
  расширять: '...',
  меню: '...',
  подгруппа: '...',
  падать: '...',
  radioOn: '...',
  radioOff: '...',
  редактировать: '...',
  ratingEmpty: '...',
  ratingFull: '...',
  ratingHalf: '...',
  загрузка: '...',
  первый: '...',
  последний: '...',
  развернуть: '...',
  файл: '...',
}

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    значения: MY_ICONS,
  },
})
  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'mdi',
    ценности: {
      продукт: 'mdi-dropbox',
      поддержка: 'mdi-lifebuoy',
      steam: 'mdi-steam-box',
      ПК: 'mdi-desktop-classic',
      xbox: 'mdi-xbox',
      playstation: 'mdi-playstation',
      переключатель: 'mdi-nintendo-switch',
    },
  },
})
  

 

<шаблон>
  

     $ vuetify.icons.product 
     $ product 

     
     

     
     

     
  


<сценарий>
  экспорт по умолчанию {
    данные: () => ({
      Пользователь: {
        имя: 'Джон Лейдер',
        платформа: 'pc',
      },
    }),

    вычислено: {
      Платформа () {
        вернуть '$' + это.user.platform
      }
    }
  }

  

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать IconComponent из './IconComponent.vue'

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    ценности: {
      продукт: {
        компонент: IconComponent,
        props: {
          имя: 'продукт',
        },
      },
    },
  },
})
  

 .ваш-svg-icon
  fill: currentColor
  

  <ссылка
      rel = "таблица стилей"
      href = "https: //fonts.googleapis.com / css? family = Материал + Иконки | Материал + Иконки + Контур | Материал + Иконки + Два + Тон | Материал + Иконки + Круглый | Материал + Иконки + Sharp »
/>
  

  <шаблон>
   {{parsed.id}} 


<сценарий>
экспорт по умолчанию {
  props: {
    имя: {
      тип: String
    }
  },
  вычислено: {
    parsed () {
      const check = (customSuffixes, standardSuffix) => {
        for (пусть суффикс customSuffixes) {
          суффикс = `_ $ {суффикс}`
          если это.name.endsWith (суффикс)) {
            возвращение {
              суффикс: стандартный
              id: this.name.substring (0, this.name.indexOf (суффикс))
            }
          }
        }
        вернуть ложь
      }

      возвращение (
        check (['заполнить', 'заполнить'], '') ||
        check (['наброски', 'очерченные'], 'очерченные') ||
        check (['двухцветный', 'двухцветный'], 'двухцветный') ||
        check (['круглый', 'округленный'], 'круглый') ||
        check (['Sharpened'], 'Sharpened') || {
          суффикс: '',
          id: это.имя
        }
      )
    },
    standardClass () {
      if (this.parsed.suffix) {
        return `material-icons - $ {this.parsed.suffix}`
      }
      вернуть 'material-icons'
    }
  }
}

  

Затем вам нужно зарегистрировать точные значки материалов, которые вы хотите.

  импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать MaterialIcon из '@ / components / MaterialIcon'

function missingMaterialIcons (ids) {
  const icons = {}
  for (const id идентификаторов) {
    for (константный суффикс ['заливка', 'контур', 'двухцветный', 'круглый', 'резкий']) {
      const name = `$ {id} _ $ {суффикс}`
      значки [имя] = {
        компонент: MaterialIcon,
        props: {
          имя
        }
      }
    }
  }
  вернуть значки
}

Vue.используйте (Vuetify, {
  
  icons: {
    ценности: {
      ... missingMaterialIcons (['видимость', 'видимость_выкл'])
      
    }
  }
})
  

Наконец, вы можете использовать такие значки материалов.

 



 $ visibility_outline 
  

Готовы к большему?

- Минимальные зависимости

• OSX Эль-Капитан и Йосемити (№ 44)
• Эскиз 3.4.4.

Следите за мной в твиттере, чтобы получать обновления. http://twitter.com/keremciu

Лицензия

MIT

=======

Пожертвовать

🍻

как насчет того, чтобы помочь мне сэкономить время? Если вы хотите купить мне пиво, вы можете сделать это через PayPal, тогда я могу больше сосредоточиться на этом, попивая пиво 🍺https: // www.paypal.me/ciukerem

Старая версия

Вы можете увидеть старую версию этого плагина здесь: http://i.imgur.com/EBGmlSe.gif - и вы можете скачать ее отсюда: https://github.com/keremciu/sketch-iconfont/tree/ старая версия