Vuetify 使用 2 个 IconFonts答案

【问题标题】：Vuetify use 2 IconFontsVuetify 使用 2 个 IconFonts
【发布时间】：2021-09-28 10:40:21
【问题描述】：

目前我在我的项目中使用谷歌字体图标，但我也想使用 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>

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

【问题讨论】：

标签： icons vuetify.js icon-fonts

【解决方案1】：

正如vuetify issue中提到的：

您需要安装所有需要的字体或添加指向 CDN 的链接，iconfont 仅指定哪个图标集将用于默认 Vueitfy 图标

所以没有办法在初始化时加载多种字体。

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

【讨论】：