How to use font icon library in vue.js

Vue.js uses the font icon library: first select the required icon and download the file; then put the downloaded file into [assets/iconfont] and introduce the [iconfont.css] file; finally in the routing Used in the table and marked in the icon.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6, Dell G3 computer.

【Recommended free articles: vue.js】

How to use font icon library in vue.js:

1. Select the desired icon and add it to the shopping cart –> Then add it to the project –> Download the file

2. Put the downloaded file into assets/iconfont

3. Introduce the iconfont.css file into App.vue;

@import './assets/iconfont/iconfont.css';

4. Use it in the routing table and mark it in the icon;

 {
       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. The final use is still in the i tag; as follows:

<i v-if="item.meta && item.meta.icon" class="iconfont" :class="item.meta.icon"></i>

<i  class="iconfont icon-Homehomepagemenu" ></i>

6. You can achieve the following effects:

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to use font icon library in vue.js. For more information, please follow other related articles on the PHP Chinese website!