How does vue use font icons

First: Visit the icon library iconfont and add the icons you like to the shopping cart.

Click the shopping cart to add the icons in the shopping cart to the project.


Download the icons to the local

unzipped file, create a test folder in the project, and copy the unzipped file Go to this directory, the demo_index.html file can view the icon name

. Add the following styles to app.vue

<style>
	/*每个页面公共css */
	@font-face {
    
    
	     font-family: 'iconfont';
	     // 文件路径
	     src: url('~@/static/test/iconfont.ttf') format('truetype');
	 }
	 .iconfont {
    
    
	     font-family: iconfont;
	 }
	 // 清楚i标签倾斜样式
	 i {
    
    
		 font-style: normal;
	 }
</style>

The method of use is as follows. The class here must be iconfont, which corresponds to the iconfont in app.vue.  The font icon name can be viewed in the demo_index.html file

<i class="iconfont">&#xe615;</i>666
<i class="iconfont">&#xe616;</i>666
<i class="iconfont">&#xe617;</i>666