ICON Font－以文字形式取代圖片的圖標字型

在網頁設計上，icon設計與應用是相當常見的，

而使用上除了將icon存成圖片以外，還可以將之作成ICON Font。

那麼到底什麼是ICON Font呢?

ICON Font是指將繪製好的向量圖檔轉存為文字檔，

並以css設定成字型來取代原有的圖片物件，在使用上只需輸入該icon對應的代碼或class，

就能夠輕鬆地產生一個小icon。

ICON Font的優缺點如下：

優點：

1.將小圖示(icon)轉為字體後，可減少原本輸出成圖片的檔案大小，降低圖片的使用率。

2.可透過css設定文字大小和文字顏色、陰影來達成效果。

3.修改時只需透過css修改樣式即可，不需再重複做修改圖片的工作。

4.因為是向量文字，相對在放大縮小時，解析度不受影響。

缺點：

1.由於文字形式只能設成單色，因此icon只能為單色或為css3的漸變色。

2.需借助專業的工具生成文字檔，製作方法可參考IcoMoon－將icon轉成Font的平台

綜合以上優缺點，使用ICON Font，不論是在檔案大小或修改的方便性來說，還是略佔優勢，

除了可自行設計以外，也可利用網路搜尋到不少免費的ICON Font資源，讓icon應用上更省力。

那麼該從哪裡下載免費的ICON Font呢？

除了上述的IcoMoon以外，這裡提供幾個主要的平台

Font Awesome：可參考Font-Awesome－簡單又好用的icon素材網 ，只要一行字即可直接使用！

Fontello

WE LOVE ICON FONTS

其實這些網站的ICON Font使用方式都差不多，首先都需先載入他們網站所提供的css，

然後輸入你要使用的icon所對應的代碼即可。

隨著扁平化設計逐漸普及，ICON Font在網頁設計上越來越常見，

而豐富的網路資源也能夠提高網站開發的速度，提升工作效率，不妨多加使用。