Question

我正在使用vue.js和vuetify。我想添加一个图标，但不起作用。（未呈现）我该如何解决？

请参考以下代码

main.js

...
import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

index.html

    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

calendar.vue

...
<i class="material-icons">
keyboard_arrow_down
</i>
...

我希望它看起来像一个图标，而不是代码
enter image description here

Answer 1

在Vue CLI 3中， src 文件夹中没有 index.html ，因此您也可以

class ReviewersController < ApiController
  def index
    # if I binding.pry here then I can access current_reviewer & current_user.
    # I'm expecting to only have access to current_reviewer (because that's what the jwt token is for)
  end
end

并将其导入 main.js 文件

current reviewer

Answer 2

通过vuetify-loader 1.2.2安装的Vuetify 2.1.3出现了此问题

似乎以前的解决方案不起作用，因为默认图标库已更改为mdi-font。

解决方案是：

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

然后在plugins / vueitfy.js文件中，在导入内容下方添加此行

yarn add @mdi/font

Answer 3

如果使用Nuxt.js，则可能会遇到完全相同的问题。要解决此问题，您必须通过CDN在CSS ...中声明Material Design图标，例如，如下所示：

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    {
      rel: 'stylesheet',
      href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
    }
]

Answer 4

如果您将Nuxt与Vuetify结合使用，则“材质图标”在Firefox中不会显示：

npm install import @mdi/font

然后在您的nuxt.config.js的{{1}}字段中添加以下条目：

css

Answer 5

如果您使用的是Vuetify，则应仅使用同时支持Material和Font Awesome图标的<v-icon>组件：documentation

示例：

<v-icon>arrow_downward</v-icon>

通过使用Vuetify，您基本上将不再需要使用class="icon_name"语法。

编辑：图标参考-Material Design和Font Awesome

Answer 6

阅读最新发布的文档，并将以下代码包含在index.html中

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

Reference

Answer 7

您可以导入所有必要的样式

app.scss

@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import '~vuetify/dist/vuetify.css';

Answer 8

@Hasnat Safder的solution对我有用，但是main.js中的顺序很重要：

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import vuetify from './plugins/vuetify';

Answer 9

毛线方式（类似于Hasnat的响应）：

yarn add material-design-icons-iconfont

并这样导入vuetify.js文件（如果不存在，则导入main.js）：

import 'material-design-icons-iconfont/dist/material-design-icons.css';

Answer 10

为我工作：

@BeforeAll

，然后将其放入plugins / vuetify.js中：

@BeforeAll

使用“ vuetify”：“ ^ 2.3.19”，“ vue”：“ ^ 2.6.12”，

Answer 11

$ yarn add @mdi/font -D

// 或 $ npm install @mdi/font -D

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css' // 确保你使用的是 css-loader 从'vue'导入Vue 从 'vuetify/lib' 导入 Vuetify

Vue.use(Vuetify)

导出默认的新 Vuetify({ 图标：{ iconfont: 'mdi', // 默认 - 仅用于显示目的 }, })

vuetify图标未显示

11 个答案: