Vue cli에서 font awesome 사용하기

📌 먼저 Document를 참조해보는것도 좋다.

1. Install

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

2. "main.js" 파일에 추가

// 설치했던 fontawesome-svg-core와 vue-fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 이렇게하면 모든 아이콘들을 불러올 수 있다.
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

// 불러온 아이콘을 라이브러리에 담습니다.
library.add(
  fas,
  far,
  fab
)

// fontawesome아이콘을 Vue탬플릿에 사용할 수 있게 등록해 줍니다.
Vue.component('font-awesome-icon', FontAwesomeIcon)

3. ".vue" 파일에 추가

...
<template>
  ...
    <font-awesome-icon icon="user-secret" />
    // 사이즈 조정
    <font-awesome-icon class="fa-2x icon="user-secret" />
  ...
</template>
...

(size 부분은 document 부분을 찾아보자.
뿐만아니라 color, layering 같은 다양한 것들이 있으니 확인한번해보자.)