V-芯片关闭图标未显示

Question

我刚刚把vuetify从1.5升级到了最新的2.1.12。我的V芯片现在失去了他们的图标。它们根本看不见。

即使我创建了一个非常简单的v-芯片，我也看不到图标。这是一个芯片的例子：

<v-chip close>No close icon, why?</v-chip>

在vuetify的1.5版本中，我可以看到" close“支柱使html在芯片内呈现一个div，类为”v- chip _close“，但是在v2.1.12中没有这样的html，因此我没有看到关闭按钮。

另外，数据表标题中的“排序箭头图标”和“下一页/前一页图标”也没有显示。我有点怀疑这是出于同样的原因。不过，在这种情况下，表是可排序的，可以切换页，至少“更改页”图标在那里，但它是不可见的。

更新：复选框和无线电按钮也不可见。他们在那里，可点击，但看不见。

app.js：

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import { sync } from "vuex-router-sync";
import App from "components/app-root";
import { FontAwesomeIcon } from "./icons";
//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Ensure you are using css-loader
import Editor from "@tinymce/tinymce-vue"
import globalMixins from "./components/common/mxins/global";

Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

// axios now available globally in vue components (use "this.$http")
Vue.prototype.$http = axios;
sync(store, router);
Vue.mixin(globalMixins);

//import Vuetify from "vuetify/lib";
import Vuetify from 'vuetify'  // For full install, DO NOT use "vuetify/lib"
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);
const vuetify = new Vuetify({
  icons: {
    iconfont: 'fa4',
  },
  theme: {
    themes: {
      light: {
        my1: "#2196F3",
      },
      dark: {
        my2: "#2196F3",
      }
    }
  }
});

Vue.use(require("vue-shortkey"));

Vue.filter('formatSize', function (size) {
  if (size > 1024 * 1024 * 1024 * 1024) {
    return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
  } else if (size > 1024 * 1024 * 1024) {
    return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
  } else if (size > 1024 * 1024) {
    return (size / 1024 / 1024).toFixed(2) + ' MB'
  } else if (size > 1024) {
    return (size / 1024).toFixed(2) + ' KB'
  }
  return size.toString() + ' B'
});

var VueCookie = require('vue-cookie');
Vue.use(VueCookie);    

Vue.use(require('vue-moment'));

const app = new Vue({
  vuetify,
  store,
  router,
  ...App
});

export { app, router, store };

有什么建议，我可以测试或改变，也许可以让它发挥作用？

由于不使用更新(可能是以前的开发人员在某个阶段添加的)，我完全删除了文件icons.js，并对导入进行了注释。不过，标准图标仍未显示。

更新的app.js (其中提到了方向性内容)

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import { sync } from "vuex-router-sync";
import App from "components/app-root";
//import { FontAwesomeIcon } from "./icons";
//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Ensure you are using css-loader
import Editor from "@tinymce/tinymce-vue"

//Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

Vue.prototype.$http = axios;
sync(store, router);
import globalMixins from "./components/common/mxins/global";
Vue.mixin(globalMixins);
import Vuetify from 'vuetify'  // For full install, DO NOT use `vuetify/lib`
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);
const vuetify = new Vuetify({
  icons: {
    //iconfont: 'fa4',
  },
  theme: {
    themes: {
      light: {
        st1: "#2196F3"
      },
      dark: {
        st2: "#2196F3"
      }
    }
  }
});

Vue.use(require("vue-shortkey"));
var VueCookie = require('vue-cookie');
Vue.use(VueCookie);
Vue.use(require('vue-moment'));

const app = new Vue({
  vuetify,
  store,
  router,
  ...App
});

export { app, router, store };

更新解决方案--我把它添加到了我的app.js中，现在它似乎正在工作：

const vuetify = new Vuetify({
      icons: {
        iconfont: 'fmd',
      },

Answer 1

由于我的投入，问题得以解决。我不得不用"md“作为图标字体，见第一篇文章。

Answer 2

我建议您以这种方式导入字体--很棒：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope, faGraduationCap, faHome, faTags, faList, faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faEnvelope, faGraduationCap, faHome,faTags, faList, faSpinner)

Vue.component('font-awesome-icon', FontAwesomeIcon)