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

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

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

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

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

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

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

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

keremciu / sketch-iconfont: этот плагин поможет вам легко вставлять значки из шрифтов значков и управлять ими.

Всем привет! Я только что создал совершенно новый плагин, чтобы упростить и надёжность рабочего процесса. Если вы хотите протестировать, он находится здесь: https://github.com/keremciu/sketch-iconfont-web и ждем ваших отзывов! 🙂

⚠️ ПЕРЕД ОБНОВЛЕНИЕМ : Если вы используете собственные шрифты для значков, экспортируйте набор шрифтов следующим образом: ВИДЕО затем обновите плагин, вы можете установить свой custom-font-bundle без потери пользовательских шрифтов.

Dark Mode поддерживает — 18 марта 2019 г. (версия 4.7,0)

Поддерживает версию 48 — 7 декабря 2017 г. (Версия 4.6.0)

Скоро появится новая версия и видео о выпуске — 19 января 2017 г.

• Снял видео про импорт кастомных иконок (ВИДЕО)

Поддерживает версию 41 — 9 ноября 2016 г. (Версия 4.5.1)

• Метод ColorWithSVGString устарел, я исправил его

Исправлена ​​проблема выбора нетекстового слоя — 4 октября 2016 г. (Версия 4.4.2)

Проблема здесь https: // twitter.com / mwstrmnn / status / 782979129780146178

Новые функции и исправления — 17 августа 2016 г. (Версия 4.4.0)

Привет, ребята, я исправил проблему в Sketch версии 3.91.

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

Первая установка

Первое использование? нужно посмотреть (ЭТО ВИДЕО)

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

Новая функция — команда преобразования — 29 апреля 2016 г.

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

Использование шрифтов со значками в эскизе

Этот плагин помогает вам легко вставлять и управлять значками из шрифтов значков, такими как FontAwesome, Ion или Material Design Icons, в ваши проекты Sketch.

Используйте любой графический шрифт.

Сам плагин не имеет встроенного шрифта. Вам нужно будет загрузить и установить шрифты, которые вы хотите использовать, непосредственно от издателя шрифтов. Однако самые популярные из них собраны в пакет, который вы можете легко скачать отсюда: https: // github.com / keremciu / font-bundles

=======

— Характеристики

Зачем это нужно

Дизайнеру: Когда дизайнер хочет добавить значок из шрифта значка — например, Material Design, fontawesome и т. Д. — ему обычно нужно найти шпаргалку, содержащую все значки шрифта, а затем вручную скопировать + вставить каждую из них, которую они хотят использовать, в свои дизайн — или используйте стороннее приложение. Отнимает много времени и громоздко.

• Теперь вы можете легко просмотреть и добавить любой значок прямо в Sketch!

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

• Теперь вы можете легко узнать название значка прямо в Sketch, без необходимости выполнять поиск!

=======

— Установка

Использование Sketch Toolbox

1. Установите плагин Sketch Iconfont прямо из Sketch Toolbox.
2. Установите шрифт, содержащий файл шрифта svg, или установите пакет шрифтов, такой как тот, который представлен здесь: https://github.com/keremciu/font-bundles

Вручную

1. Загрузите и извлеките ZIP-пакет этого плагина из этого репо.
2. Поместите папку в папку плагинов Sketch (используйте Plugins> Reveal Plugins Folder , чтобы найти папку плагинов).
3. Установите шрифт, содержащий файл шрифта svg, или установите пакет шрифтов, такой как тот, который представлен здесь: https://github.com/keremciu/font-bundles

=======

— Документация

Это небольшая документация по командам

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

• 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/ старая версия

❍ Иконка Шрифт

Создавать собственные шрифты

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

Pixel Perfect Результаты

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

Бесплатные иконки, бесплатное приложение

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

Удивительный инструмент для иконографии

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

Импортируйте собственные векторы

В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы при их импорте.Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.

Работает в автономном режиме

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

Множественные лигатуры на символ

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

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

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

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

Иониконы Страница загрузки

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

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

Shock Icon, страница

Dripicons Загрузить страницу

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

Entypo Загрузить страницу

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

Sosa Загрузить страницу

Foundation Icons Скачать страницу

7.Типики (308 иконок)

Typicons Загрузить страницу

The Elegant Icon Загрузка шрифта Страница

Иконки карты Загрузить Страница

Лигатурные символы Загрузить страницу

Heydings Иконки Скачать Страница

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

13. Signify (38 иконок)

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

14. PulsarJS (73 иконки)

PulsarJS Загрузить страницу

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

Узнайте, как использовать шрифты значков, прочитав эти руководства:

• 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, которую можно использовать для сокращения времени загрузки.

Заключение

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

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

Icon Fonts — Vuetify

Vuetify поставляется с начальной загрузкой с поддержкой Material Design Icons, Material Icons, Font Awesome 4 и Font Awesome 5.По умолчанию приложения будут использовать значки Material Design.

# Установка шрифтов значков

Вы должны включить указанную библиотеку значков (даже если используется по умолчанию). Это можно сделать, включив ссылку на CDN или импортировав библиотеку значков в ваше приложение.

# Значки дизайна материалов

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

Это шрифт значков по умолчанию для Vuetify.Вы можете включить его через CDN:

Или как локальная зависимость:

  $ 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',
  },
})
  

# Значки дизайна материалов — JS SVG

Используйте пути SVG, указанные в @ mdi / js.Это рекомендуемая установка при оптимизации вашего приложения для производства. Вам нужно включить ТОЛЬКО , если вы планируете использовать больше значков по умолчанию.

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

Укажите mdiSvg iconfont:

 

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

Vue.use (Vuetify)

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

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

 

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


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

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

  

# Значки материалов

Установка такая же, как описано выше. Для проектов без процесса сборки рекомендуется импортировать значки из CDN

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

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

После установки пакета импортируйте его в свой основной файл js. Обычно это main.js , index.js или app.js , расположенный в папке src / . Если вы используете приложение SSR, у вас может быть клиент .js или файл entry-client.js .

 

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

Vue.use (Vuetify)

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

# Font Awesome 4 Icons

То же, что и выше. Самый простой способ проверить это в своем проекте — установить FontAwesome через cdn:

Установка FontAwesome 4 такая же, как и его более новая версия, только из другого репозитория. Вы будете нацелены на репозиторий font-awesome , а не на репозиторий @fortawesome .

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

Не забывайте, ваш проект должен распознавать CSS. Если вы используете webpack, установите и настройте загрузчик css.

 

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

Vue.use (Vuetify)

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

# Font Awesome 5 Icons

Самый простой способ начать работу с FontAwesome — использовать компакт-диск. В заголовке вашего основного index.html поместите этот фрагмент:

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

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

В основной точке входа просто импортируйте all.css пакета. Если вы используете настроенный проект webpack, вам необходимо настроить поддержку файлов .css и с помощью загрузчика css webpack.Если вы уже используете Vue CLI, это будет сделано автоматически.

 

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

Vue.use (Vuetify)

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

# Font Awesome SVG Icons

Добавьте необходимые зависимости.

  $ 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
  

Затем добавьте глобально font-awesome-icon компонент и установите faSvg как iconfont в конфигурации Vuetify.

 

импортировать 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',
  },
})
  

# Использование настраиваемых значков

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

 

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

Vue.use (Vuetify)

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

Вы можете импортировать и назначить svg значению значка. Импортированный svg должен содержать только путь без оболочки .Для импорта более сложного SVG используйте значок компонента.

 

импортировать 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,
  },
})
  

# Пользовательские значки многократного использования

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

 

импортировать 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
      }
    }
  }

  

# Значки компонентов

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

 

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

Vue.use (Vuetify)

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

Если вы хотите, чтобы ваш значок SVG правильно наследовал цвета и масштаб, обязательно добавьте к нему следующий CSS:

 .ваш-svg-icon
  fill: currentColor
  

# Отсутствуют значки материалов

Некоторые значки материалов по умолчанию отсутствуют. Например, человек и person_outline доступны, но visibility_outline нет, а видимость — нет. Чтобы использовать отсутствующие значки материалов, добавьте шрифт ниже (удалите другой шрифт материала, если он уже зарегистрирован).

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

Вы можете добавить свой собственный компонент. Допустим, это @ / components / MaterialIcon.vue .