如何在 vue-cli 專案裡面使用 Font Awesome

筆記一下如何在 vue-cli 下使用 Font Awesome 的圖示。

方法一：

在終端機輸入這段：

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

接著在 main.js 讀入檔案

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

然後就可以在專案裡面使用 Font Awesome 提供的方式使用圖示了，例如：

<i class="fas fa-align-left"></i>

方法二：

在終端機輸入這段：

$ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/free-brands-svg-icons $ npm i --save @fortawesome/vue-fontawesome

在 main.js 讀入：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'library.add(faSpinner)
Vue.component('font-awesome-icon', FontAwesomeIcon)

接下來可以使用 componet 的方式讀入：

<template>
  <div id="app">
    <font-awesome-icon icon="spinner" />
  </div>
</template>

參考：
How to use Font Awesome 5 on VueJS Project