字體圖標(font-icon)，你還有什麼理由不使用它？

優勢

下面的簡介來自，著名字體圖標庫Font Awesome的首頁，http://fontawesome.io：

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Font Awesome 或者其餘字體圖標能提供能夠直接使用CSS修改的可縮放的矢量圖標，能夠修改的內容包括圖標的大小、顏色、陰影等這些CSS的力量能作到的一切。

簡單來講優勢有：

• 矢量（無限縮放、高清）

• CSS樣式（通用、靈活）

• 體積更小（快速）

• ......

缺點

這些多是項目沒用上字體的圖標的一些緣由，並不徹底是字體圖標的缺點：

1. 庫（Font Awesome......）太大了

2. 不能徹底符合設計稿

3. 兼容性、可訪問性

4. 太麻煩，仍是以前切圖片圖標方便

5. 歷史項目，改動成本過高

解決方案or分析

庫（Font Awesome......）太大了 & 不能徹底符合設計稿

方案一

使用字體圖標編輯器修改字體圖標庫，參考圖標字體(IconFont)製做這篇文章中提到的軟件FontCreator去編輯字體圖標庫的某個字體文件，從新轉化生成。刪除大量用不到的字體圖標後，圖標庫的體積會大大縮小。

方案二

方案一略麻煩，不推薦。咱們其實能夠本身作字體圖標庫，參考ICONFONT平臺功能介紹、可能更好用的IcoMoon App。本身製做字體圖標的時候有須要注意這些：

• 阿里圖標庫ICONFONT的圖標多，免費可是編輯器不如IcoMoon好用。不過能夠從阿里圖標庫下載SVG圖標再導入IcoMoon中製做。

• 建議設計師對於一些經常使用圖標直接去阿里圖標庫找，下載SVG文件便可。對於實在找不到的圖標才本身動手作，使用Ps、Ai、Sketch等作出符合字體圖標標準的SVG便可。最好除了圖標自己外不要有多餘的細節如邊距、背景等，這些都會用CSS寫。前端拿到一套SVG後本身去製做成字體圖標便可。

• SVG圖標上傳到圖標製做平臺後，還須要作簡單調整包括默認大小、位置、對齊等。整個公司能夠按照一個統一標準調整這些SVG。若是是IcoMoon的話，調整完畢後記得把SVG再下載下來，好好保存（給設計部發一份），以後會很通用。並且IcoMoon非白金會員的話是沒法在線存儲的。

簡單圖標在設計階段就無需本身設計，複雜圖標也能夠導出SVG製做成通用的字體圖標，不但能還原設計稿，還可能效率更高。

好比，某設計的不會畫圖標，因而TA在阿里圖標庫把PNG的圖標下載下來，而後在Ps裏作視覺稿，而後前端切圖小弟又從PSD中把圖標切出來，xx.png，xx@2x.png，有時候這些圖標居然還自帶背景色......

好比，某設計會畫圖標，因而把通用圖標畫了個遍，而後切圖......

只能說：

這是個不怎麼追求效率的時代

兼容性、可訪問性

兼容性

字體圖標是基於WebFont來實現的，WebFont的兼容性請看，caniuse WebFont。
再提供多種格式的字體的前提下，兼容性徹底不是問題。

可訪問性

國內不多關注這個吧，其實Font Awesome提供了相關的說明，請看，Accessibility

太麻煩，仍是以前切圖片圖標方便

其實直接切出圖標，如Sketch能夠直接導出多種大小的圖標。配合各種打包工具如Webpack，能夠把小圖標轉化成base64代碼。從某種意義上來講確實挺方便，並且也支持Retina，也挺小。

其實這方案也行，不過，最重要的是能夠把切圖標的工做拋給設計師吧......

有時候根本不考慮Retina了，不考慮響應式，不考慮移動端了，不考慮......，總之先把項目趕出來。

歷史項目，改動成本過高

有些項目確實是前輩沒有考慮到用字體圖標，或者那時候尚未這種技術。

可是有些最近的項目，那很是多是前輩挖的坑，區別是有意無心吧。不過大多數都不是故意的。趕而已，懶而已。

更多 & 參考

• 圖標字體化淺談

其餘

能夠告訴我你不用字體圖標的理由嗎？有些兼容、缺陷可能未能列舉出來，見諒歡迎補充。

我不用字體圖標，我用kaomoji：(☆_☆)和emoji： ?