vuetify 아이콘이 표시되지 않음

vuetify 아이콘이 표시되지 않음

나는 사용하고 있다vue.js그리고vuetify. 아이콘을 추가하고 싶은데 예상대로 작동하지 않는다(렌더링되지 않음).

어떻게 하면 고칠 수 있을까?

다음 코드를 참조하십시오.

main.js.

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

Vue.use(Vuetify);

인덱스.포인트

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

달력부에를 하다

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

나는 그것이 코드가 아니라 아이콘처럼 보이길 원한다.

Vue CLI 3을 사용하면 src 폴더에 index.html을 사용할 수 없으므로 대신

npm install --save material-design-icons-iconfont

main.js 파일로 가져오기

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

이 문제가 Vuetify 2.1.3이 Vuetify-loader 1.2.2를 통해 설치됨

기본 아이콘 라이브러리가 mdi-font로 변경되었기 때문에 이전 솔루션이 작동하지 않는 것 같다.

해결책은 다음과 같았다.

yarn add @mdi/font

그리고 파일에main.js(또는)plugins/vueitfy.js존재하는 경우) 가져오기 아래에 이 라인을 추가하십시오.

import '@mdi/font/css/materialdesignicons.css'

날 위해 일했어:

npm install @mdi/font

플러그 인/plugins/probetify.js:

import '@mdi/font/css/materialdesignicons.css'

"vuetify": "^2.3.19", "vue": "^2.6.12"를 사용하여,

Nuxt.js를 사용하면 똑같은 문제에 직면할 수 있다.이 문제를 해결하려면 CDN을 통해 CSS의 재료 설계 아이콘을 다음과 같이 선언하십시오.

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'
    }
]

Vuetify와 함께 Nuxt를 사용하는 경우 Firefox에 재료 아이콘이 표시되지 않음:

npm install import @mdi/font

그럼 네 안에서nuxt.config.js다음 항목을 귀하의 항목에 추가하십시오.css필드:

css: ["@mdi/font/css/materialdesignicons.css"]

npm install @mdi/font

main.js(또는 plugins/migetify.js)로 쓰다.

import "@mdi/font/css/materialdesignicons.css";

나도 여기서 이 답을 얻었는데 잘 됐다 )))

최신 릴리스된 문서를 읽고 아래 코드를 index.html에 포함하십시오.

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

참조

필요한 스타일을 모두 가져올 수 있음

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';

@Hasnat Safder의 해결책은 나에게 효과가 있지만 main.js의 주문은 중요하다.

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

vuetifyconfig 파일도 확인하십시오.plugins/vuetify.js

추가 돛대 설정iconfont: 'mdi'. 동일한 경우 기본값은iconfont:'fas'

나는 그것을 찾기 위해 많은 시간을 보냈다)

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

const opts = {
  theme: {
    themes: {
      light: {
        //
      },
    },
  },
  icons: {
    iconfont: 'mdi',
  },
};

export default new Vuetify(opts);

실의 방식(하스태트의 반응과 유사함):

yarn add material-design-icons-iconfont

다음과 같이 vuetify.js 파일(또는 main.js가 없는 경우 main.js)로 가져오기:

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

$ yarn add @mdi/font -D

// 또는 $npm 설치 @mdi/font -D

// src/plugins/procetify.js

'@mdi/font/css/materialdesignicons.css' 가져오기 // 'vue'에서 css-loader 가져오기 Vue를 사용하고 있는지 확인하십시오.

Vue.use(Vuetify)

기본 new Vuetify({ 아이콘: { iconfont: 'mdi', // default - 디스플레이 목적으로만 사용됨})

참조URL: https://stackoverflow.com/questions/57053728/vuetify-icon-not-showing