Question

我使用npm install material-design-icons-iconfont安装图标css，它在节点模块中可用。构建后，以下dist文件中的woff文件可用

Material-design-icons.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 / fonts / .woff。所有文件名和路径均正确，但在控制台中仍然看到404错误。

Answer 1

您是否已检查Webpack配置中是否包含css-loader？

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

Answer 2

安装Afetr 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">

Answer 3

有多个材质图标包飞来飞去。还有多种格式，SVG 等等。很容易混淆。假设您有标准的 vuetify 配置，并且您的目标是在本地安装字体，因为您不喜欢向 head 注入外来物质，那么以下应该可行：

消除外部库

首先编辑您的 public/index.html 并注释掉 @mdi 导入。这一行还为我们提供了 vuetify 期待哪个包的线索。

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

安装本地依赖

然后在您的项目文件夹中，安装 @mdi / font 包。

yarn add @mdi/font

导入到Vue

然后，最后我们需要将这个新下载的包放入我们的应用程序中。您可以在任何地方导入，但最好在位于 plugins/vuetify.js

的 vuetify 配置文件中保留与 vuetify 相关的内容

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

让 Vuetify 了解这一切

并确保将 material design 导出为 vuetify 项目的首选图标字体。

内部plugins/vuetify.js

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

您可能需要重建您的项目。祝您有美好的一天。

P.S @ 指向您的 node_modules 文件夹。

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

3 个答案:

消除外部库

安装本地依赖

导入到Vue

让 Vuetify 了解这一切