Vue.js Vuetify/脱机图标
我有一个菜单和菜单按钮的以下代码。我正在使用Vue CLI 3和VuetifyVue.js Vuetify/脱机图标,vue.js,vuetify.js,Vue.js,Vuetify.js,我有一个菜单和菜单按钮的以下代码。我正在使用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-
<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材质设计图标、材质设计图标和材质设计图标图标iconfont),但在计算机脱机时,我没有找到显示该图标的机会。我不确定是否有一种我不知道的特殊连接方式。有人能就如何解决这个问题提供见解吗
- 我读过很多链接,比如和,但是我无法让它们为我工作
- 好的,我终于让它在VS代码中工作了
npm install material-design-icons-iconfont
将文件夹从node_modules复制到public/css文件夹中(这是我以前没有做的事情)
通过更改URL以开始修改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">
Vuetify在其文档中说明了这一点: 基本上:
npm install material-design-icons-iconfont -D
然后:
你必须自己主持。如果您详细说明您尝试了什么,以及尝试时出现了什么问题,这会有所帮助。不幸的是,我没有写下我所有的尝试、结果等。列表太长了。好吧,您链接的SO线程中接受的答案看起来是正确的方法。试一试,然后带着您遇到的具体问题回来让我们解决。我安装了一个npm材质设计图标,修改了node_modules/material design icons/icont/material-icons.css文件以包含相对url(例如:url(“node_modules/material design icons/icont/icont/MaterialIcons Regular.woff”),重新启动服务器,强制页面刷新,图标仍然丢失OK,因此现在检查浏览器控制台。查看字体是否正在尝试加载,并查找任何错误。H,我不久前也解决了此问题。很抱歉,我没有更新线程。但是,此代码基本上是我为使其正常工作所做的。没有问题。这对其他人有好处看看是否有人需要帮助
// 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'
})