FontAwesome-在Vue專案中使用

step1.安裝

• 在 terminal 使用 npm 安裝 @fortawesome/fontawesome-svg-core 及 @fortawesome/vue-fontawesome

  npm install @fortawesome/fontawesome-svg-core --save
  npm install @fortawesome/vue-fontawesome --save

• 再依照各自使用 font-awesome的版本及需要的樣式作安裝，有Free, Pro, Brands, Solid, Regular

  $ npm install @fortawesome/free-solid-svg-icons --save
  $ npm install @fortawesome/free-regular-svg-icons --save
  $ npm install @fortawesome/free-brands-svg-icons --save
  
  //Pro
  $ npm install @fortawesome/pro-regular-svg-icons --save

step2.配置

• 在 main.js中，先從fontawesome-svg-core叫出library
• 接著import會使用到的 icon

• 並將 icons 加入 library中

  import {library} from '@fortawesome/fontawesome-svg-core';
  import { faAd } from '@fortawesome/free-brands-svg-icons';
  import { faUsers } from '@fortawesome/free-brands-svg-icons';
  
  library.add(faAd,faUsers);

• 最後登記物件，命名為’font-awesome-icon’，即可在HTML或<template>中用<font-awesome-icon>呼叫使用

  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  
  Vue.component('font-awesome-icon', FontAwesomeIcon);

補充：也可以將整個Style下的所有icons全部引入，但不建議此方法，會增加不必要的載入

import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

step3.呼叫使用

• 可以直接在HTML中

  <font-awesome-icon icon="ad" />
  <font-awesome-icon icon="users" />

或是指定樣式前綴詞

<font-awesome-icon :icon="['fa', 'ad']" />
<font-awesome-icon :icon="['fab', 'users']" />

可以再加上size，size清單可參考官網說明

<font-awesome-icon icon="ad" size='lg'/>

參考資料

• vue-fontawesome
• GitHub project-vue-fontawesome