什么是 iconfont
iconfont就是字面上的意思，叫做“字體圖標”，將一套圖標集以字體文件的形式封裝，并通過 CSS 的 @font-face 作為 Web Font 調用。
為什么要使用 iconfont
在互聯網剛起步的時候，較多使用的是png圖片，但是png圖片更換起來很麻煩， 并且自適應效果很差，有時候會出現鋸齒以及馬賽克模糊的情況，加載起來也較慢，影響用戶體驗。
iconfont 的產生就是來解決上面的問題，將 icon 做為字體來使用，它具有很多優勢：
對 web 和 app：
彈性，在網頁或者 app 上，展示字體是很便捷的。用 iconfont 可以很方便的改變 icon 的顏色，或者加入一些其他的效果。
可縮放，可以很方便的改變圖標的大小。
矢量，iconfont 是矢量的并且具有獨立的分辨率，不管在高分辨率還是低分辨率，不管是在網頁還是手機端，都具有很好的展示效果，不會出現鋸齒或者馬賽克模糊。
節省加載時間，iconfont 很小，每個小圖標只有幾 kb，大大節省了加載時間。
對設計師來說：
- 可以本地使用，這個是我最喜歡的功能，將 iconfont 安裝到本地的系統上，然后就可以在Ps，Ai，Sketch這些設計軟件里使用啦~
推薦的兩個 iconfont 工具
那么對于設計師來說，要做 iconfont 需要怎么操作呢？
首先，需要一個轉換設計稿的平臺。
目前，國內用的最多的是阿里巴巴矢量庫，優點是這是國內的中文網站，使用起來無語言障礙，缺點就是版權問題，因為上傳上來的圖標全部是做為公開庫的，其他人可以進行瀏覽下載。以下是阿里巴巴矢量庫的官方免責聲明。
在此，推薦一個國外的網站，iconmoon 創建于2011年，其上有很多成熟的圖標集，大多數都是精心制作，要收費的，可以看看拿來參考。主要還是要用它提供的制作 iconfont 的功能。
如何使用 iconmoon
第一步
將設計的 icon 導出成 svg 文件。我做了一個 icon 參考線的sketch文件，其中有64x64，32x32，24x24三個尺寸，以此來保證一套圖標中 icon 大小的一致性。文末提供下載。
第二步
打開iconmoon網站，點擊 import icons 按鈕，選擇剛剛導出的 svg 格式的 icon，要注意的是，圖標不能直接使用描邊，要用布爾運算做成填充樣式的，要不上傳的圖標在縮放的時候會遇到問題。
第三步
點擊右下角的 generate font，再點擊 download
第四步
會得到一個zip的壓縮包
解壓出來，可以看到有demo，有字體文件，也有使用代碼
把這個文件夾直接給開發就ok啦~
如何在本地使用 iconfont
那么，如何在本地使用 iconfont 呢？
第一步
像安裝正常字體文件一樣安裝剛剛解壓的文件夾里的 .ttf 文件
第二步
打開 demo.html 文件復制里面的圖標代號到 sketch 里面，復制如下圖綠色部分。
第三步
選擇字體，可以看到圖標就出現了，可以像處理文字一樣的處理圖標，改變它的大小和顏色。
