Vuetify / 离线图标答案

【问题标题】：Vuetify / Offline iconsVuetify / 离线图标
【发布时间】：2019-05-11 18:26:18
【问题描述】：

我有以下代码用于菜单和菜单按钮。我正在使用 Vue CLI 3 和 Vuetify

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
...
<v-navigation-drawer fixed app v-model="drawer">
  <MyMenu/>
</v-navigation-drawer>
<v-toolbar fixed app>
  <v-toolbar-title class="headline text-uppercase">
    <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
  </v-toolbar-title>
</v-toolbar>

当计算机在线时，代码运行良好。但是，当计算机处于脱机状态时，菜单按钮图标不会出现。相反，它只是替换为文本“菜单”。我已经研究过通过 npm 安装（vue-material-design-icons、material-design-icons 和 material-design-icons-iconfont），但是在计算机离线时没有任何运气让图标显示。我不确定是否有一种我不知道的特殊方法将它连接在一起。谁能提供有关如何解决此问题的见解？

我已经阅读了很多链接，例如 https://github.com/vuetifyjs/cordova/issues/11 和 How to host material icons offline?，但我无法让它们为我工作。

【问题讨论】：

您必须自行托管。如果您详细说明您尝试了什么，以及尝试它出了什么问题，将会有所帮助。
很遗憾，我没有写下我所有的尝试、结果等。列表太长了
好吧，您链接的 SO 线程中接受的答案看起来是正确的方法。试一试，然后返回您遇到的具体问题供我们解决。
我对 material-design-icons 进行了 npm 安装，修改了 node_modules/material-design-icons/iconfont/material-icons.css 文件以包含相对 url（例如：url("node_modules/ material-design-icons/iconfont/MaterialIcons-Regular.woff），重启服务器，强制刷新页面，图标依旧不见
好的，现在检查浏览器控制台。查看字体是否正在尝试加载，并查找任何错误。

标签： vue.js vuetify.js

【解决方案1】：

好的，我终于可以在 VS Code 中使用它了。

npm install material-design-icons-iconfont

将 node_modules 中的文件夹复制到 public/css 文件夹中（这是我以前没有做的）

修改material-design-icons.css文件，修改url开头

 url('/css/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular

- 在项目的 index.html 页面中，添加

<link rel="stylesheet" href="css/material-design-icons-iconfont/dist/material-design-icons.css">

【讨论】：

【解决方案2】：

Vuetify 在他们的文档中解决了这个问题：

https://vuetifyjs.com/en/framework/icons#installing-fonts

基本上：

npm install material-design-icons-iconfont -D

然后：

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

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

【讨论】：

H，我不久前同样解决了这个问题。对不起，我没有更新线程。然而，这段代码本质上是我为了让它工作而做的。
没问题。看看别人是否需要帮助是好事

【解决方案3】：

我的朋友们， https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons

首先使用npm install @mdi/font -D 或yarn add @mdi/font -D 安装mdi
在 vuetify 文件中导入 import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
并在配置中设置 export default new Vuetify({ icons: { iconfont: 'mdi', // default - only for display purposes }, })

【讨论】：