对于菜单和菜单按钮,我有以下代码。我正在使用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>
当计算机处于联机状态时,该代码非常有用。但是,当计算机脱机时,菜单按钮图标不会显示。而是将其替换为文本“ MENU”。我研究了通过npm安装(vue-material-design-icons,material-design-icons和material-design-icons-iconfont)的方法,但是在计算机脱机时没有显示图标的运气。我不确定是否有一种我不知道的特殊方式将其连接在一起。谁能提供有关如何解决此问题的见识?
答案 0 :(得分:3)
请在其文档中解决此问题
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'
})
答案 1 :(得分:1)
好的,我终于可以在VS Code中使用它了。
npm install material-design-icons-iconfont
将node_modules中的文件夹复制到您的public / css文件夹中(这是我以前没有做过的事情)
通过更改网址开头来修改material-design-icons.css文件
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">