之前對換膚就是改變css與img中的路徑來進行切換，但是效果與打包後的文件都不理想。使用字體小圖標只要改變CSS中的font-size和color就可以。
現結合其他資料對其進行小總結下：
優勢
輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會馬上渲染出來，不需要下載一個個圖像。這樣可以減少HTTP的請求數量，而且和HTML5的離線存儲配合，可以對性能做出優化。
靈活性：不調字體可以像頁面中的文字一樣，通過font-size屬性來對其進行大小的設置，而且還可以添加各種文字效果，如color、hover、filter、text-shadow、transform等效果。靈活的簡直不像話！
兼容性：圖標字體支持現代瀏覽器，甚至是低版本的IE瀏覽器，所以可以放心的使用它。
相比於位圖放大圖片會出現失真、縮小又會浪費掉像素點，圖標字體不會出現這種情況。
劣勢
圖標字體只能被渲染成單色，或者是CSS3的漸變色
版權上也有着對應的限制，當然還是有很多免費的圖標字體可以供我們下載。
當自己創作圖標字體的時候，是比較耗費時間的，重構人員的後期維護成本也比較高
圖標字體的製作
網址：https://icomoon.io
點擊左上角的IcoMoon App
進入之後點擊Import Icons把SVG圖片上傳上去
全選上傳上去的圖片，點擊右下角的Generate Font
每個項目下都會有一個Get Code按鈕，點擊它會出現一個使用方法的彈窗
點擊左上角的Preferences，在Font Name中設置生成字體的名稱
設置好之後，關閉彈出窗口，點擊右下角的Download按鈕進行下載
打開下載好的壓縮包，把fonts目錄下的文件拷貝到任意目錄下。之後就可以通過之前Get Code按鈕下提供的使用方法進行使用。
三種都是矢量圖（即放大不失真），但是各自又有各自的優缺點，
1.font awesome；
優點：相對比較簡單，查看官網看例子基本上都會用 （http://www.bootcss.com/p/font-awesome/）
缺點：文件較大，影響加載速度
注意引用的路徑和版本；
2.inconfont(阿里巴巴矢量圖標庫); （個人用的最多的一個）
可以縮放的矢量圖標。你可以使用CSS對它們進行修改:大小，顏色，陰影等。體積特別的小。可能幾百個圖標才幾十KB。
優點：
- 高清保真，因爲是SVG圖形
- 靈活性，可以設置大小，顏色等
- 兼容性好，支持IE6
- 開源的字體庫很多
- 減少HTTP請求
缺點：
- 維護自己的字體庫麻煩一些
- 圖表字體只能被渲染爲單色的
操作流程繁瑣（自己上傳的或者官網搜索的-------------- 加入購物車-------- 添加至項目（自己建的項目） -------項目文件下載到本地-------引用到代碼中）
3.svg，（個人認爲最好轉化爲iconfont字體小圖標，）
優點：單個引用，比較靈活；
缺點：svg代碼較長，使頁面看起來醜陋；