04-20-2019

Laravel_Font Awesome的使用

 

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