今天要介紹的是免費提供svg格式的icon圖示、不僅處理樣式方便，還有廣大icon資源庫可供搜尋使用的 Font Awesome
Font Awesome 跟多數圖庫一樣有分付費與免費版本，YUKI自己使用上來看，免費版本已經綽綽有餘了!
一個標示會提供至少1~3種免費的樣式供選擇，以icon的需求來說很足夠。
Font Awesome提供兩種使用情況，網頁用與桌機用。
On the Web: 有提供CSS、less、SCSS/Sass、Javascript、svg ，這幾種形式。
除了全部打包的檔案以外，也有提供特定形式的icon檔案，減少不必要的檔案量，例如只要solid或是brands的樣式。
下載官方的檔案後，照著官方說明的方式，將要使用的資料夾與檔案加入專案的資料夾裡，就可以用囉!
跟著流程來走一次吧:
下載後解壓縮，可以看到各種形式的檔案供插入專案。
官方檔案下載點
將webfonts整個資料夾+css資料夾裡的all.css加入你的專案資料夾，在<head>插入all.css。
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
</body>將js資料夾裡的all.js加入你的專案資料夾，在<head>插入all.js。
<head>
<script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
</body>solid樣式、brands為免費使用，regular、light為付費Pro版，
安裝方式同css，將webfonts+css資料夾整個加入你的專案資料夾，
把你認為用不到的樣式css刪除(不要solid就刪掉solid.css)，在<head>中插入/css/fontawesome.css，
以及要用的樣式css (如:/css/brands.css)。
js版也是同樣的方式。
安裝好後，就可以從官網搜尋要的icon，複製程式碼貼進html。
比如我想搜尋跟用餐有關的icon，打入關鍵字dining，點下搜尋，就會找出所有相關樣式的icon，
顏色較深的是免費使用的icon，其他則是pro版才有。
點進去icon後，顏色是隨機配的，僅供參考。
往下滑還有使用呈現範例可以參考，整個頁面都承襲同個顏色，蠻有趣的效果。
複製圖案上面那排資訊後面的<i class=…….></i>，貼回你html裡要新增icon的位置。
重新整理你的網頁所在的瀏覽器，然後噔噔! 就出現了!
如果你使用的是css檔，那icon就會是字體的形式呈現在網頁上，如果是使用js的話，就會是svg格式呈現喔!
搜尋頁面的左邊有分類表，YUKI覺得超多種類的，在一般網頁應用上應該是足夠了，
也能統一整個網站的icon風格，FontAwesome的風格雖是單色偏簡易的icon，但設計上也屬上乘，
有多樣化需求的話也可以購買Pro版來使用，整體安裝及使用流程都很簡單親民，是不可多得的好資源呀~
YUKI這邊就沒有教for Desktop的安裝方式了，因為就是下載後安裝字體的使用方式，
要是操作上有問題的話再留言給我吧!
This website uses cookies.