php矢量图图标,矢量图（字体图标）

矢量图(即放大不失真)

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为例

方法二：通过vue脚手架安装

//1.安装font-awesome

npm install font-awesome --save//2.在main.js全局导入

import 'font-awesome/css/font-awesome.css'

//3.页面引用