[CSS]Font Awesome 真的算是網頁設計師的救世主

網頁設計,免不了的就是要有一些小圖示,
特別是像設群分享網站的圖示(臉書、Google+、twitter、IG...),
又好比下載啦、留言或是一些箭頭、指標等,
做這些小圖示雖然不麻煩(經常作的朋友們一般都有範本了),
不過面對現在不同的裝置螢幕尺寸,
要不就是有時客戶有意見(或是自己看不順眼),
想換換顏色跟大小,三不五時就要改圖,
更討厭的是經常都要一個小圖做好幾個尺寸,再下CSS Code來配置,
也是夠麻煩的。
 
今天跟大家分享一個猶如救世主角色的工具,
有了祂,那麼小圖示的問題不僅不麻煩,還可以在設計上更多選擇與彈性,
這個工具就是:Font Awesome。
 
Font Awesome 簡單來說,就是一個標準的字型檔,
在字型檔中,近乎所有常用到的圖示,
通通變成一個字型,也就是說使用這些圖示,就像是直接打字一樣,
CSS中對文字可用的效果,也通通有效,
像是字距、行距、大小、陰影、顏色、透明度.....
這樣就不用為了改一個尺寸或是調整一下顏色,
就要開Photoshop改圖,
又可以反覆使用,
就好比下面這樣(按讚的圖示):


很有意思吧?
 
Font Awesome 目前內建了675個不同的小圖示(Icon),同時還在不停的增加當中,
範圍包含了常見的網站使用的圖案外,很多的品牌(好比Facebook, G+, Youtube, IG...)、交通工具、情境圖案、指向圖示、應用程式按鈕、電子商務按鈕等等。
 

 
如果還沒有使用過的朋友們,
千萬別忘了到他們網站上看看:fontawesome.io

Readers comment