[DAY25]番外篇-使用Font Awesome來加入個性化圖示

12th鐵人賽 fontawesome webpack npm

river_huang

2020-10-09 20:06:29

7263 瀏覽

當我們網站要放入一些造型設計圖示，但沒有設計師幫我們畫這些精緻的icon，就可以考慮使用Font Awesome。相較引入傳統的圖片，使用Font Awesome具有以下優點：

屬向量字型，變更網頁顯示比例時不會失真
不用花時間管理圖片檔案，省去製作不同尺寸的時間
提供免費版本(要在程式碼中宣告來源)

那就趕緊正式進入主題吧，今天要來介紹如何在webpack中引入Font Awesome做使用：

安裝Font Awesome

最簡單快速的安裝方式可以到Font Awesome下載放置目錄裡或是透過CDN，在HTML裡的head區段裡引入css檔案，不過上述不在今天教學範圍內，我們將會透過NPM來安裝，搭配Node.js + webpack開發的環境做引入使用。

首先我們到NPM官網找到@fortawesome/fontawesome-free，這邊會使用免費版本做示範，我們到終端機執行以下安裝：

$ npm install @fortawesome/fontawesome-free --save

安裝完畢後，會在package.json看到版本，在node_modules裡看到下載好的資料夾。

如何使用Font Awesome

在談引入前先說說怎麼使用，引入CSS後，在HTML中使用以下程式碼如下：

<i class="fas fa-user"></i>

是不是很簡單?在class裡有兩個class，fas代表樣式，fa-user代表圖示的代碼，關於代碼可以到這裡查詢，因為這篇用免費版本，所以只能用深色的圖示。

引入Font Awesome

有兩種方式可以引入，以下分別做說明：

引入SCSS裡搭配字型檔：將Font Awesome的SCSS引入到開發的SCSS檔，由webpack執行bundle後整合在style.css，搭配字型檔案做使用。
引入JS頁面轉為SVG：在JS頁面中引入，並定義要使用的圖示代號，將部份轉為SVG在網頁中顯示。

我們先試試用SCSS引入來做使用：

方法一：引入SCSS裡搭配字型檔

這個方式適合想用CSS樣式產生icon的開發者，因為有時候會用到CSS偽元素做icon狀態變化，例如收合/顯示，必須搭配class顯示，較方便使用，缺點是使用者一開使會載入肥肥的字型檔案，增加對伺服器端的存取。

首先到src/scss/style.scss(SCSS進入點)裡加入以下程式碼，記得順序要在_variables.scss自訂義SCSS變數後面：

src/scss/style.scss

//引入scss變數
@import 'variables';
 
//引入fontawesome樣式
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
 
//...

因為icon有分不同的樣式solid/regular/brands，會對應class的名稱fas/far/fab等，記得要一起引入。然後到_variables.scss裡加入變數，設定字型檔的目錄：

src/scss/_variables.scss

//fortawesome webfonts
$fa-font-path: '/node_modules/@fortawesome/fontawesome-free/webfonts';

最後最關鍵的是要在webpack.config.js設定裡將Font Awesome字型檔一起打包，否則無法正確顯示，因為會使用到file-loader，所以先用NPM安裝如下：

$ npm install file-loader --save-dev

接著到設定檔module區段加入編譯規則：

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {...},
      {...},
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name][hash].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },

我們在options裡可以看到兩個屬性，name代表轉出的字型檔名稱，outputPath代表轉出的目錄名稱。

以上都設定好，執行npm run build來執行打包程序，成功的話會在dist目錄裡看到字型檔轉出：

然後用上面說的方式在HTML中使用就可以了，好處是方便使用，但因為是一次載入所有icon字型，所以會對伺服器增加額外請求，如果用不到其他樣式，可以考慮只在style.scss引入需要用到的就好。

方法二：引入JS頁面轉為SVG (較推薦)

這個方式因為是在JS模組中引入並定義要使用的icon，然後webpack會把帶有Font Awesome樣式的icon轉為SVG，有點像是自助式的，用多少拿多少，雖然稍微麻煩一點，好處是不會造成額外連線請求，適合注重效能與節省server流量資源的開發方式。

以下先用NPM安裝以下套件：

$ npm install @fortawesome/fontawesome @fortawesome/fontawesome-free-solid @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands --save

這裡跟剛剛安裝free版本的完整內容不太一樣，因為是要透過JS來轉換，可以針對需要的樣式做安裝。安裝後可以發現在node_modules中原來的@fortawesome看到以下目錄：

安裝完畢接著到JS檔裡引入使用，這裡我們另外建立一個登入頁面做範例：

src/pages/Login.js

import fontawesome from '@fortawesome/fontawesome'
import { faUser, faKey } from '@fortawesome/fontawesome-free-solid'
 
fontawesome.library.add(faUser, faKey)
 
export const Login = {
  render: () => {
    return `
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-4 py-5">
                    <form>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">
                                    <i class="fas fa-user"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">
                                    <i class="fas fa-key"></i>
                                </span>
                            </div>
                            <input type="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="basic-addon2">
                        </div>
                    </form>   
                </div> 
            </div>
        </div>
    `
  },
}

開頭我們引入fontawesome，並針對樣式與需要用的字型來做轉換，接著HTML中一樣的使用方式。好了之後記得將此頁引入src/routes/Route.js裡，執行npm run build，讓我們來看看結果會怎麼樣：