vue 如何使用字体图标

首先：访问图标库 iconfont ， 将喜欢的图标添加至购物车

点击购物车，将购物车内的图标添加至项目


将图标下载至本地

解压文件，在项目中创建test文件夹，并将解压的文件复制到该目录下 ，demo_index.html文件可以查看图标名称

在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>

使用方法如下。此处的class 必须为 iconfont，对应app.vue 中的 iconfont， 字体图标名称可以点击 demo_index.html 文件查看

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