Question

我刚刚将vuetify从1.5升级到了最新的2.1.12。我的V芯片现在缺少其关闭图标。它们根本不可见。

即使我创建了非常简单的V芯片，也看不到该图标。这是芯片的示例：

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

在vuetify的1.5版中，我可以看到“ close”道具使html在类“ v-chip__close”的芯片内渲染div，但在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 };

有什么建议可以测试或更改以使其可行？

更新由于不使用fontawesome（可能是以前的开发人员在某个阶段添加的），所以我完全删除了icons.js文件并评论了导入。标准图标仍然没有显示。.

已更新的app.js（其中注释了fontawesome-stuff）

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

我建议您以这种方式导入超棒的字体：

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)

Answer 2

由于我的输入，问题得以解决。我必须使用“ md”作为iconfont，请参阅第一篇文章。

vuetify v-chip关闭图标未显示

2 个答案: