Nuxt.js Fontawesome free 적용하기

Nuxt JS에서 Fontawesome을 사용할 때 붙이는 방법은 다양하게 존재합니다.

저는 Plugin으로 만들어서 사용하는데 보통 새로운걸 만들때 초기 환경 셋팅시에만 작성하니 번번히 까먹어서

결국 블로그에 포스팅하게 되었네요.

 

 

먼저 설치를 위해 사용환경 서버 및 클라이언트에는 NPM이 설치되어 있어야합니다.

yarn을 사용하시는분들도 있는데 저는 yarn을 안써봐서... 명령어는 npm이 yarn으로만 바뀌는걸로 알고 있어요!

 

 

npm이 준비되었다면, 다음과 같이 fortawesome에 fontawesome-free를 설치합니다.

npm i --save @fortawesome/fontawesome-free

 

 

설치가 끝나면 nuxt.js 프로젝트내 plugins 폴더에 파일을 새로만들어줍니다.

 

# plugins/fontawesome.js

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

위 와 같이 fontawesome.js 라는 plugin 파일을 새로 생성하고 나면,

 

nuxt.config.js에서 작성한 플러그인을 추가해주어야 합니다.

 

# nuxt.config.js

…
plugins: [
  "@/plugins/fontawesome.js",
],
…

위와 같이 작성한뒤 사용하고자 하는 위치에서 사용하고자 하는 font awesome을 찾은 뒤

 

 

 

저는 vuetify.js 프레임워크를 사용중이면서,  fas fa-running을 사용한다고 가정하면!

다음과 같이 작성하면

<v-icon left>fas fa-running</v-icon>

 

이렇게 아이콘을 사용할 수 있습니다.