Home > Article > Web Front-end > 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!