Иконки

Чтобы изменить шрифт иконок, добавьте опцию iconfont при подключении Vuetify.

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

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

Эта библиотека используется Vuetify по умолчанию. Для проектов, не использующих систему сборки, рекомендуется импортировать иконки с CDN

Также можно установить библиотеку иконок локально, используя yarn или npm. Помните, что эти пакеты не являются репозиториями Google и могут не обновляться своевременно

Когда вы установили пакет, импортируйте его в главном файле вашего приложения. Это, как правило, main.js, index.js или app.js, расположенный в папке src/ вашего проекта. Если вы используете серверный рендеринг (SSR) в вашем приложении, то, скорее всего, главный файл называется client.js или entry-client.js.

Библиотека Material Design Icons устанавливается так же, как и Material Icons. После установки её нужно будет импортировать в ваше приложение.

Самый простой способ начать работать с FontAwesome – использовать CDN. В части head вашего файла index.html поместите следующий код:

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

В главном файле просто импортируйте файл all.css из пакета. Если вы используете Webpack в своем проекте, настройте импорт .css файлов используя css-loader. Если вы уже используете vue-cli-3, импорт .css файлов уже настроен по умолчанию.

Устанвка выполняется так же, как и Font Awesome 5. Импорт FontAwesome через CDN это самый простой способ использовать Font Awesome 4 в своем проекте:

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

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

Add required dependencies.

Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config.

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

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

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

Это поможет вам убедиться, что ваше приложение всегда использует пользовательские иконки. Вот несколько способов использования <v-icon> с пользовательскими иконками.

Вы можете использовать такие же иконки в ваших собственных компонентах. Каждый раз, когда вы передаете $vuetify.icons через v-text, v-html или как текст, <v-icon> будет использовать это значение. Это позволяет вам создавать решения, легкие в построении и управлении.

You can utilize component icons with Font Awesome Pro to select individual icon weights:

Instead of provided icon fonts presets you can use your own component icons. You also can switch icons that are used in Vuetify component with your own.

If you want your SVG icon to inherit colors and scale correctly - be sure add the following css to it: