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

vue项目使用阿里矢量图标库-编程之家

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

ps:我用的是unicode的方法,三种方法看个人习惯
vue项目使用阿里矢量图标库-编程之家

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

ps:我是在assets中创建了一个css文件夹,我把这个css文件放在了这里边
vue项目使用阿里矢量图标库-编程之家

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更新一下就行了
vue项目使用阿里矢量图标库-编程之家
项目中:
vue项目使用阿里矢量图标库-编程之家
嘿嘿,码字不易点个赞吧!