【问题标题】:<v-icon> vuetify material Icon (mdi) showing problem in vuetify and nuxt app?<v-icon> vuetify material Icon (mdi) 在 vuetify 和 nuxt 应用程序中显示问题?
【发布时间】:2019-10-24 12:09:59
【问题描述】:

我正在使用 nuxt 和 vuetify。所有标签工作正常。但是当我使用&lt;v-icon&gt;时,图标没有显示..

<v-flex xs12 mb-3>
  <v-btn outline fab small color="blue-grey lighten-4">
      <v-icon color="grey darken-4">mdi-facebook</v-icon>
  </v-btn>

  <v-btn outline fab small color="blue-grey lighten-4">
      <v-icon color="grey darken-4">mdi-google-plus</v-icon>
  </v-btn>

  <v-btn outline fab small color="blue-grey lighten-4">
     <v-icon color="grey darken-4">mdi-linkedin</v-icon>
  </v-btn>
</v-flex>

【问题讨论】:

标签: vue.js vuetify.js nuxt.js


【解决方案1】:

这对我有用:

首先将以下内容添加到 nuxt.config.js 中的 vuetify: {} 对象:

defaultAssets: {
  font: true,
  icons: 'md'
},
icons: {
  iconfont: 'md',
}

然后参考你的图标没有'mdi-'前缀如下:

&lt;v-icon&gt;feedback&lt;/v-icon&gt;

请注意,我只有 2 小时的 Nuxt.js 经验,因此可能有更好的方法,但我希望这可以帮助人们入门 :)


编辑:我发现 Vuetify 可以附带两个不同的图标库(取决于您遵循的安装说明)。一个是md,您使用没有为您的图标添加前缀,另一个是mdi,您使用带有“mdi-”前缀。

【讨论】:

  • 很高兴听到@Photonic :)
  • @AmanuelNega 我已经在底部的编辑中做了(我也链接到他们两个)
【解决方案2】:

非官方的 google 存储库确实有效,不能为他人作证。先试试CDN链接

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

或者,使用 yarn 或 NPM 在本地安装

$ yarn add material-design-icons-iconfont -D

// 或

$ npm install material-design-icons-iconfont -D

然后导入你的 vuetify.js 文件

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})

就是这样

【讨论】:

  • 对我来说,使用cdn 不工作...但如果使用npm,它工作
猜你喜欢
  • 2019-08-01
  • 2021-11-02
  • 2021-02-09
  • 1970-01-01
  • 1970-01-01
  • 2020-07-21
  • 2018-07-30
  • 2021-03-14
  • 1970-01-01
相关资源
最近更新 更多