文章彙整

IconFont(圖示字型)網頁Icon的最佳解

By Astral Web 9 months agoNo Comments
首頁  /  網站設計與開發  /  IconFont(圖示字型)網頁Icon的最佳解

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

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

 

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

 

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

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

 

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

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。