iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 25

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

當我們網站要放入一些造型設計圖示,但沒有設計師幫我們畫這些精緻的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

有兩種方式可以引入,以下分別做說明:

  1. 引入SCSS裡搭配字型檔:將Font Awesome的SCSS引入到開發的SCSS檔,由webpack執行bundle後整合在style.css,搭配字型檔案做使用。

  2. 引入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,讓我們來看看結果會怎麼樣:

Perfect,成功將原本的class樣式轉成SVG了,原本的標籤自動被註解起來了,這樣就不用一開始載入很肥的字型檔囉。以上就是今天的教學,喜歡的話希望大大們可以不吝給小弟一個小鼓勵,明天見!

/images/emoticon/emoticon34.gif

參考資料:
在 Webpack 使用 Font Awesome


上一篇
[DAY24]番外篇-Bootstrap實用元件介紹
下一篇
[DAY26]番外篇-用Javascript在SPA中實做Bootstrap Modal
系列文
不用前端框架 手把手打造基礎SPA網站30

尚未有邦友留言

立即登入留言