字型圖示（iconfont）雖然有要被淘汰的趨勢，但是在其服役期間也解決了其他方案的很多痛點，如
- 圖檔
- 增加額外請求
- 不能使用CSS控制其内部細節
- 不同分辨率的适配
- CSS Sprites（圖檔整合術）
- background-position 定位具體圖檔可維護性太差
- 添加删除圖檔成本高，尤其是删除圖檔
其實在特定條件下（對圖檔的改動頻次很低）也是比較不錯的解決方案，也啟發了CSS Sprites
這種可以取代SVG Sprites
的方案。iconfont
字型圖示的使用 - 以Iconfont平台為例
下面我們以Iconfont平台為例介紹如何友善地生成、使用字型圖示：
登入
首先我們點選右上按鈕區域的小人圖示登入，然後我們可以根據自己的條件選擇登入方式：
建立項目
一般來說，為了日後維護友善，我們會為圖示建立一個項目：
按照我們工程的需要填寫必要的資訊後，就可以成功建立一個空項目了：
此時項目内時空的，沒有任何圖示檔案，此時我們就可以将設計好的SVG上傳到目前項目中了，或者使用其他人制作好的圖示檔案（注意不要侵權）。
設計圖示前請務必檢視圖示繪制原則，如果團隊内有其他設計風格也可，但一定要始終堅持某一種設計風格。
代碼中使用字型圖示
使用前請檢視代碼應用，再根據自己工程特點靈活改變。
當我們将SVG圖示上傳工程後，我們就需要在代碼中使用圖示了，Iconfont為我們提供了“線上”和“線下”兩種使用方式，可以根據自己的實際需求選擇使用方式。
線上使用方式
在項目中，點選“檢視線上連結”按鈕，第一次點選時應該需要再次“生成代碼”，代碼生成後會看到一個css連結，如果已經生成代碼，則會看到一個css連結，在項目入口html檔案中引入此css連結即可：
線下使用方式
在項目中，點選“下載下傳至本地”按鈕，可以将字型檔案及示例檔案以zip包的方式下載下傳至本地：
對web端使用來說，針對圖示屬性又可分為下面兩種使用方法：
- 單色/純色圖示：
unicode引用
font-class引用
- 多色圖示：
symbol引用
SVG Sprites
單色/純色圖示，并不是說不能改變顔色，隻是說整體的圖示隻能有一種顔色，是可以通過CSS控制的。而多色圖示是指在設計SVG檔案時就将各顔色細節确定，在上傳SVG檔案時一定要選擇保留顔色送出。
與設計師協作
對于編碼同學來說大多不關注圖示的設計過程，但是一定要知會設計師圖示設計的規範，比如圖示設計一定要盡量鋪滿畫布，這樣在使用時就不會受到莫名其妙留白的困擾了（對編碼來說，圖示自身的留白是不可控的，是以個人建議不要有，但是團隊中如果有既定的設計規範，隻要堅持自己的設計規範即可）。
上文中也說道，在建立圖示項目時可以将設計師等協作人員作為協作者添加進項目，這樣在需要添加或修改圖示時，隻需要設計師上傳就好，而不必将圖示檔案再發送給編碼同學。是以這裡就要有一個統一的命名規範需要協作者們共同遵守：
- 命名時不需要帶字首，建立項目時我們已經指定了字首，如我們設定的字首為icon，上傳的SVG檔案名為table.svg，則我們使用
font-class
symbol引用
- 堅持一種連接配接規則，如駝峰、下劃線連接配接符、減号連接配接符等，一般使用減号連接配接符，如file-close.svg
圖示的設計
設計風格每個人都不同，但在一個項目中要堅持一種風格。
下面是我在使用字型圖示過程中總結出的一些設計注意點，作為代碼狗，說的不對的地方請拍磚：
圖示要盡量鋪滿畫布
對于編碼來說，圖示本身留白未知的，是以不要依賴圖示本身留白控制元素間的間距。
- 對于寬高比大于1的圖示來說，寬度和畫布寬度相等，并且于畫布垂直居中
- 對于寬高比小于1的圖示來說，高度和畫布高度相等，并且于畫布水準居中，此時在代碼中使用要注意左右的留白會影響元素間的間距
- 對于寬高比等于1的圖示來說，高度、寬度分别和畫布高度、寬度相等（畫布一般來說是正方形）
字型圖示的使用與設計
盡量保證預設情況下尺寸合适
上面的規則是針對大多數圖示而言的，針對一些小圖示（如方向圖示、箭頭圖示等明顯尺寸偏小的圖示）來說不必滿足上面的條件，但還是要盡量保證預設情況下尺寸合适，同時于畫布水準、垂直居中即可。
這裡的預設情況下是指不特地針對這些小圖示使用樣式控制其尺寸。
使用“存儲為”導出SVG圖示
圖示設計完成後，就需要将SVG圖示導出，此時要使用存儲為指令，而不是導出指令。
以illustrator為例，選擇“檔案”->“存儲為”，在存儲為的彈窗中儲存類型設定為svg，并且為其設定名稱後點選“儲存”。此時illustrator還不會真正儲存檔案，而是會彈出一個SVG選項的彈窗用于我們控制生成的svg檔案的某些屬性，下面是我常用的設定：