vue项目使用iconfont图标之fontc-class的使用

最近用到阿里巴巴矢量图标，在此分享下小经验

1将你所需要的图标先都加入购物车，然后在购物车那里添加到你的项目中去，最后下载到本地

不要一个一个下载代码，因为到时候这些都要持续集成到你的真实项目中，其文件名都是一样的。最后确定后在

资源管理-》我的项目-》下载到本地

 

下载后的文件如下，我采用的是font-class，我实际需要的文件是这些

2 引用到项目中，使用class类名即可

1)需在vue中引入iconfont.css文件，我写在main.js中import引入可以

import 'src/assets/icons/iconfont.css'

2)如果iconfont.eot、svg、ttf、woff在同一级，则iconfont.css的引入路径不用改，不在同一目录则要改动其相对路径

3）最后在vue文件需要图标的位置处添加即可

<li><i class="iconfont  icon-xxx"/></li>

要使用哪个样式，就把哪个样式的名字复制下来，把上面的icon-xxx替换,这里的icon-xx是在iconfont官网-我的项目中可以找到

这个项目中的内容不要删掉，每次增加都要全部下载下来替换，记得加入团队项目中，不然以后维护项目就坑了别人。

目前能想到的粗略方法是这样，应该会有其他更便捷的方法