浅谈字体小图标font awesome，iconfont，svg各自优缺点

三种都是矢量图（即放大不失真），可是个自又有个自的优缺点，

1.font awesome；

  优势：相对比较简单，查看官网看例子基本上都会用 （http://www.bootcss.com/p/font-awesome/）

  缺点：文件较大，影响加载速度  

 注意引用的路径和版本；

 

2.inconfont(阿里巴巴矢量图标库);   （我的用的最多的一个）

  优势：用几个引几个，不会影响加载速度；

            能够用本身作的svg上传的iconfont自动转换成字体，更加灵活。

   缺点：本身上传svg再下载，须要会作svg，要有必定的做图功底；

             操做流程繁琐（本身上传的或者官网搜索的-------------- 加入购物车-------- 添加至项目（本身建的项目） -------项目文件下载到本地-------引用到代码中）

 

3.svg，（我的认为最好转化为iconfont字体小图标，）

  优势：单个引用，比较灵活；

  缺点：svg代码较长，使页面看起来丑陋；

 

 

 

qa补充：

 

  本身上传的icon大小不一，颜色不一？

      颜色统一：上传去除颜色；

     大小统一：制做的时候注意下

 

 

 png 怎么作成的svg ？

       1.保存为eps，而后放到ai里头，保存为svg（ai导出svg）

              这种svg貌似不能填充，不怎么好用；

       

 

     

 

未完待续。。。。。。。。。。。。