Vuetify 使用 2 个 IconFonts

问题描述

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

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

const Board () => {
    ...
    useEffect(() => {...},[to]);
    ...
}

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

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'
    }
});

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

解决方法

如本vuetify issue所述：

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

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

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