Javascript 无法在vuetify中使用材质设计图标

我使用

npm安装材料设计图标icont

安装图标css，它在节点模块中可用。在我构建之后，下面的woff文件在dist中可用

材质设计图标.css

  /* For IE6-8 */
      src: local("Material Icons"), local("MaterialIcons-Regular"), 
      url("./fonts/MaterialIcons-Regular.woff2") format("woff2"), 
      url("./fonts/MaterialIcons-Regular.woff") format("woff"), 
      url("./fonts/MaterialIcons-Regular.ttf") format("truetype");

所有三个woff文件都显示404。我在dist文件夹中进行了验证，我可以在static/fonts/.woff中看到所有这些文件。

---

在浏览器控制台中，也可以使用“localhost:8000/static/font/.woff”。所有文件名和路径都是正确的，但仍然可以在控制台中看到404错误。

您是否检查了网页包配置中是否有css加载程序

module: {
    loaders: [
     { test: /\.css$/, loader: "css-loader" }
  ]
}

---

安装ETR NPM后，为什么不按照Vuetify文档的要求将其导入

main.js

或

app.js

文件中呢

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css'
// Ensure you are using css-loader

Vue.use(Vuetify, {
  iconfont: 'md'
})

但最简单的方法只是包括CDN链接：

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

---

有多个材料图标包四处飞舞。还有多种格式，SVG等等。很容易弄糊涂。假设您有一个标准的vuetify配置，并且您的目标是在本地安装字体，因为您不喜欢将异物注射到您的

头部

，那么以下内容应该可以工作：

消除外部库 首先编辑您的

public/index.html

并注释掉

@mdi

导入。这一行还为我们提供了vuetify需要哪个包的线索

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

导入到Vue 然后，最后我们需要将这个新的下载包放到我们的应用程序中。您可以在任何地方导入，但最好将vuetify相关内容保存在vuetify配置文件中，该文件位于

plugins/vuetify.js

import "@mdi/font/css/materialdesignicons.min.css";

export default new Vuetify({
    icons: {
        iconFont: "md",
    },
});

让Vuetify知道这一切 并确保将

材质设计

导出为vuetify项目的首选图标字体

内部

plugins/vuetify.js

import "@mdi/font/css/materialdesignicons.min.css";

export default new Vuetify({
    icons: {
        iconFont: "md",
    },
});

您可能需要重建项目。祝你今天愉快

---

p.S

@

指向您的

节点模块

文件夹。

显然这是一个参考问题-您是否尝试过使用“/”如url（“fonts/MaterialIcons Regular.woff2”）格式（“woff2”）？是的，我也尝试过，但仍然不起作用。