vue项目使用阿里矢量图标库

1.打开阿里图标库选择想要的图标然后添加入库

2.把选择好的图标添加到我的项目中然后在我的项目中查看

ps:我用的是unicode的方法，三种方法看个人习惯

3.点击下载到本地，下载之后是一个压缩文件，然后解压打包之后把iconfont.css添加至vue-cli项目的静态文件夹中。

ps:我是在assets中创建了一个css文件夹，我把这个css文件放在了这里边

4.在main.js中全局引入这个css文件

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

5.在css文件中放入阿里图标库中的在线链接并且加入iconfont的默认配置，如：

	@font-face {
	  font-family: 'iconfont';
	  src: url('//at.alicdn.com/t/font_2436376_w2vxqhlkmlr.eot');
	  src: url('//at.alicdn.com/t/font_2436376_w2vxqhlkmlr.eot?#iefix') format('embedded-opentype'),
	    url('//at.alicdn.com/t/font_2436376_w2vxqhlkmlr.woff2') format('woff2'),
	    url('//at.alicdn.com/t/font_2436376_w2vxqhlkmlr.woff') format('woff'),
	    url('//at.alicdn.com/t/font_2436376_w2vxqhlkmlr.ttf') format('truetype'),
	    url('//at.alicdn.com/t/font_2436376_w2vxqhlkmlr.svg#iconfont') format('svg');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-guanbi::before {
	  content: "\e62a";
	}

6.就可以直接在项目中使用啦

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

ps:如果后期还想加入一些其他的图标的话，重复上边的步骤就行了，然后在我的项目中点击更新代码，直接在项目的css文件夹中把@font-face更新一下就行了

项目中：

嘿嘿，码字不易点个赞吧！