fbpx

一開始看到的時候會不會以為是字體相關的功能阿~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的示範~~

Leave a Reply