ICON Font－以文字形式取代圖片的圖標字型 - 網頁設計

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

2.可透過css設定文字大小和文字顏色、陰影來 ... 首頁 文章專區 網頁設計相關文章 ICONFont－以文字形式取代圖片的圖標字型 文章專區 網頁設計相關文章 文章專區MENU 最新文章訊息 網頁設計相關文章 SEO與搜尋行銷相關 網頁程式技術探討 ICONFont－以文字形式取代圖片的圖標字型 在網頁設計上，icon設計與應用是相當常見的， 而使用上除了將icon存成圖片以外，還可以將之作成ICONFont。

  那麼到底什麼是ICONFont呢? ICONFont是指將繪製好的向量圖檔轉存為文字檔， 並以css設定成字型來取代原有的圖片物件，在使用上只需輸入該icon對應的代碼或class， 就能夠輕鬆地產生一個小icon。

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

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

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

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

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

2.需借助專業的工具生成文字檔，製作方法可參考IcoMoon－將icon轉成Font的平台   綜合以上優缺點，使用ICONFont，不論是在檔案大小或修改的方便性來說，還是略佔優勢， 除了可自行設計以外，也可利用網路搜尋到不少免費的ICONFont資源，讓icon應用上更省力。

  那麼該從哪裡下載免費的ICONFont呢？ 除了上述的IcoMoon以外，這裡提供幾個主要的平台 FontAwesome：可參考Font-Awesome－簡單又好用的icon素材網，只要一行字即可直接使用！ Fontello WELOVEICONFONTS 其實這些網站的ICONFont使用方式都差不多，首先都需先載入他們網站所提供的css， 然後輸入你要使用的icon所對應的代碼即可。

  隨著扁平化設計逐漸普及，ICONFont在網頁設計上越來越常見， 而豐富的網路資源也能夠提高網站開發的速度，提升工作效率，不妨多加使用。

  更多文章 客製化網站和套版網站的差別-一化網頁設計 客製化網頁設計的優點-一化網頁設計 穿透的Div－CSS的pointer-events屬性 瀏覽器支援度檢測－CSS@support的用法 不用再清除float浮動了！CSS的display:flow-root屬性 網頁設計使用CSS排版對SEO的影響 什麼是RWD(響應式網頁設計、回應式網頁設計)? 回列表頁 Close 關於一化 作品展示 專案側寫 網路行銷 線上問答 文章專區 聯絡我們