矢量图（即放大不失真）
1.font awesome；
优点：相对比较简单，查看官网看例子基本上都会用 （http://www.bootcss.com/p/font-awesome/）
缺点：文件较大，影响加载速度
注意引用的路径和版本；
2.inconfont(阿里巴巴矢量图标库); （个人用的最多的一个）
优点：用几个引几个，不会影响加载速度；
可以用自己做的svg上传的iconfont自动转换成字体，更加灵活。
缺点：自己上传svg再下载，需要会做svg，要有一定的作图功底；
操作流程繁琐（自己上传的或者官网搜索的-------------- 加入购物车-------- 添加至项目（自己建的项目） -------项目文件下载到本地-------引用到代码中）
3.svg，（转化为iconfont字体小图标再引用比较好，）
优点：单个引用，比较灵活；
缺点：svg代码较长，使页面看起来丑陋；
扩充：
font awesome用法
方法一.在官网下载Font Awesome字体库到本地，复制整个font-awesome文件夹到项目中static文件夹下，然后在index.html中引入font-awesome.css文件即可：
//以font-awesome-4.7.0为例 <link rel="stylesheet" tyle ="text/css" href="static/font-awesome-4.7.0/css/font-awesome.css"/>
方法二：通过vue脚手架安装
//1.安装font-awesome npm install font-awesome --save //2.在main.js全局导入 import 'font-awesome/css/font-awesome.css'
//3.页面引用
<i class="fa fa-plus-square-o fa-lg" @click="Expand(true)" title="展开所有" style="margin-right:8px;font-size:14px"></i>
<i class="fa fa-minus-square-o fa-lg" @click="Expand(false)" titie="收缩所有" style="font-size:14px;"></i>