如何在 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