Vuetify 使用 2 个 IconFonts

Question

目前我在我的项目中使用 google 字体图标，但我也想使用 FAS5 图标

我正在使用这个 vuetify 配置，但是 documentation 没有说明这一点。

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from "vuetify/lib/util/colors";
import '@fortawesome/fontawesome-free/css/all.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        ...
    },
    icons: {
        iconfont: 'fa'
    }
});

这是我正在做的一个笨拙的例子。但恐怕这是不好的做法，可能会产生错误或错误

<v-btn icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
    <v-icon>nightlight_round</v-icon>
</v-btn>

<v-btn icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
    <v-icon>fa-moon</v-icon>
</v-btn>

有没有合适的方法来实现这个？

Answer 1

如本文所述vuetify issue：

You need to install all fonts you need or add links to CDNs, iconfont only specifies which icon set will be used for default Vueitfy icons

因此无法在初始化时加载多种字体。

我会在 Vuetify 配置中将最常用的字体保留为默认字体，并根据需要加载另一种字体。在 Vuetify docs 中显示了与您相同的 FA5 实现，所以我认为您已经正确完成了。

Vuetify 使用 2 个 IconFonts

Vuetify use 2 IconFonts

icons

vuetify.js

icon-fonts