矢量图（字体图标）

矢量图（即放大不失真）

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>