Home  >  Article  >  Web Front-end  >  How to use font icon library in vue.js

How to use font icon library in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-12-03 14:31:243051browse

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.

How to use font icon library in vue.js

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

How to use font icon library in vue.js

2. Put the downloaded file into assets/iconfont

How to use font icon library in vue.js

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:

How to use font icon library in vue.js

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn