淺談字體小圖標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貌似不能填充，不怎麼好用；

       

 

     

 

未完待續。。。。。。。。。。。。