一開始看到的時候會不會以為是字體相關的功能阿~No No No,
這是icon的網站,可免費使用在網頁上,
當然如果想放自己畫的icon也可以,
他網站有提供當個圖示的程式碼要怎麼運用才會出現在你的網頁上,
我們今天就簡單的做一兩個圖示試試吧~
Step1.
安裝Font Awesome
輸入 npm install font-awesome — save
Step2.
import 資料
打開app.scss,然後打上
@import “node_modules/font-awesome/scss/font-awesome”;
(記得儲存前要npm run watch ,scss才會編譯喔)
Step3.
打上名稱
每個icon都有屬於自己名稱,那我們要怎麼知道呢?
放心~官網都幫我們寫得好好的。
EX1.今天我想加一個+的符號在我的button裡(記得搜尋要用英文)
我選了第二個,進去後他會跟你說要怎麼寫,以及尺寸怎麼調整(按 examples)。
來看看結果~~
登登~我把New的button換成icon的形式。
EX2.今天我想在帳號的前面加icon(這裡就直接看結果嘍~)
我加了一顆足球在裡面。
以上是Font Awesome的示範~~