> 웹 프론트엔드 > View.js > vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법

vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법

coldplay.xixi
풀어 주다: 2023-01-13 00:44:49
원래의
3085명이 탐색했습니다.

vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법: 먼저 필요한 아이콘을 선택하고 파일을 다운로드한 다음 다운로드한 파일을 [assets/iconfont]에 넣고 마지막으로 [iconfont.css] 파일을 사용하세요. 라우팅 테이블, 아이콘으로 표시됨.

vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, Dell G3 컴퓨터.

【추천 무료 기사: vue.js

vue.js 글꼴 아이콘 라이브러리 사용 방법:

1 원하는 아이콘을 선택하여 장바구니에 추가 –>

vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법

2.apps/iconfont

vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법

3에 iconfont.css 파일을 추가하세요.

@import './assets/iconfont/iconfont.css';
로그인 후 복사

4.

 {
       path: '',
       redirect: '/index',
       component: Layout,
       meta: { title: '首页', icon: 'icon-Homehomepagemenu' },
       children: [{
           path: 'index',
           name: '首页',
           component: () =>
               import ('@/view/homepage/index'),
           meta: { title: '首页', icon: 'icon-Homehomepagemenu' },
           hidden: false
       }]
   }
로그인 후 복사

5의 아이콘에 표시합니다.

<i v-if="item.meta && item.meta.icon" class="iconfont" :class="item.meta.icon"></i>
로그인 후 복사
<i  class="iconfont icon-Homehomepagemenu" ></i>
로그인 후 복사

6 다음과 같은 효과를 얻을 수 있습니다. 학습 권장사항:

vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법javascript

(동영상)

위 내용은 vue.js에서 글꼴 아이콘 라이브러리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿