許多網頁設計師會為了找一個小小的icon而煩惱,在切版的時候常常又要先把icon的圖先傳到資料夾後再寫路徑把icon呈現出來,這時候如果有一個好用的工具會加快切版速度的!

點選這裡進入Awesome Font的網站,點選「Download」下載Awesome Font的資料後,解壓縮後放到相對應的資料並建立連結資料夾的路徑,這樣才可以把Awesome Font叫出來喔!

awesome-1

 

再來可以到Awesome Font網站的上方選單選擇「Icons」選單,進入後,可以在搜尋列輸入關鍵字尋找想要的icon(關鍵字需為英文)

awesome-3

 

進到結果頁後,把紅框處的原始碼複製起來後,貼到想要的編輯頁面即可。

awesome-4

 

以CADIIS官網的頁底為例:

awesome-5

 

原始碼範例:

awesome-6

 

Awesome Font的好處是可以和字型一樣放大或縮小icon,不會失真,免去重複製作icon的時間。而且有超過100種以上的icon圖可供選擇,方便又快速,好工具分享給大家~

 

 

想跟我們談談你的網頁設計構想嗎?

 

 

網頁設計洽詢 >