2019年6月2日 星期日

【筆記】icon 字體:Font Awesome,免費 / 付費版都有

Font Awesome 2018極受歡迎的開源ICON字體,進入網站就會看到各式各樣的扁平ICON,點綴在簡約的漸層畫布上,至2019/06站上的ICON字體共有5,099枚,其中可免費使用的有1,515枚。



很現實的,由於行動裝置介面空間有限,可比用寸土寸金來形容。以網頁或是APP來說,純裝飾的圖形在畫面上實在太過奢侈,為了在小小的空間裡,塞入更多的資訊,設計形態產生改變,小小的圖形開始代表著一個操作按鈕。


自從行動裝置問世之後,使用者接收訊息的方式,也漸漸從純文字轉向圖像閱讀。設定界面,以前只有文字項目,現在項目的前方則會增加小圖示,圖形+文字這樣的做法,讓文字閱讀與圖像閱讀的使用者,不但增加了美觀,更增加了可讀性。




使用 Font Awesome 必須先註冊,到『Start』頁面填入使用者的email,填完後在信箱內會收到一封來自 Font Awesome 的email。



由email內的引導連結,就可得到一行JS引入代碼。如果不註冊,先到『Start』頁面,email內的連結還是會將你引導到註冊頁。關於一定要註冊的理由, Font Awesome 網站上有詳細的解釋。





以下備忘使用方法

1. 將JS代碼放入<head></head>之間



2. 到網站上尋找想要的使用的ICON https://fontawesome.com/icons



網站說明了免費與付費版可使用的圖示差異




3. 在HTML上的用法
因為是字體,在搭配自己寫的css後,即可自定義顏色、縮放、旋轉...









沒有留言: