IconFont（圖示字型）網頁Icon的最佳解

Icon已是網頁上不可或缺的元素，除了可以提供乾淨的UI外，也少不了簡潔易懂的UX在裡面。

以往在Icon的使用上，不外乎就是由客戶、設計師提供或者是使用Font Awesome、Flaticon等等這類免費與開源素材網站上尋找符合需求的圖案來使用。

如果是一般的Icon其類型可能為png、svg，jpg⋯等等常見的圖檔，但是身為一位前端一定常常會遇到以下類似情形：

例如，在滑鼠點擊(click)與滑過(hover)Icon時，會做一個變色的效果動作，這就意味者我們至少需要兩張圖，如果是上下左右這種基本圖示那就需要八張圖，如果配上不同的背景色及效果那就又得再加一組四張圖。如此一來想要完善或是美化一個網站時，就需要放入大量的Icon，如果是svg類型的或許還可以由工程師去做變更，但如果是其他類型的情況下就只好請設計師出圖、或著上網尋找。這樣不但需要花時間處理這些需求，還要往Server上丟一大推的資源，有時候連前端自己都搞混哪張圖是什麼樣式了(如下圖)。

然而IconFont完美地解決了這個問題！只要將所需的Icon們設定成了IconFont後，就能像一般文字一樣使用CSS的各種屬性如：”font-size”、”color”去進行改變，不但可以減輕資源的使用，更能方便進行修改與有效管理，以達到我們要的效果。

IconFont的產生製作可以參考先前我們分享過的自訂您的網頁圖示字型(icon font)這篇文章裡提過的Fontastic或是IcoMoon等線上工具呦。