vuetify图标未显示 [英] vuetify icon not showing

问题描述

我正在使用vue.js和vuetify.我想添加一个图标，但不起作用. (未呈现)

I am using vue.js and vuetify. I want to add an icon but not working. (not rendered)

我该如何解决?

请参考以下代码

main.js

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

Vue.use(Vuetify);

index.html

index.html

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

calendar.vue

calendar.vue

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

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

I want it to look like an icon, not code

推荐答案

如果使用的是Vuetify，则只需使用同时支持Material和Font Awesome图标的<v-icon>组件:

If you are using Vuetify, then you should simply use the <v-icon> component which supports both Material and Font Awesome icons: documentation

示例:

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

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

By using Vuetify, you basically won't need to use the class="icon_name" syntax anymore.

图标参考-材料设计& 字体很棒

icon references - Material Design & Font Awesome

就像一年前一样，我回来时看到人们只是在投票反对并向其发送垃圾邮件，这不是答案".在评论中，通知让我很困扰.没错，这不是答案，但是它得到了批准，所以我对此无能为力.查看下面的Hasnat Safder的答案以获取解决方案.

这篇关于vuetify图标未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！