vue-fontawesome

로그인 api 해보다가 버튼까지 직접 만들어서 하면 더 좋을 것 같아서

이참에 fontawesome도 설치 해보자! 해서 다해보는 중이다. npm 쓰는거 쫌 재밌네... 

 

1. package.json

"dependencies": {
  "@fortawesome/vue-fontawesome": "^2.0.6",
  "axios": "^0.27.0",
  "bootstrap": "^4.6.1",
  "bootstrap-vue": "^2.21.2",
  "core-js": "^3.6.5",
  "vue": "^2.6.11",
  "vue-router": "^3.2.0",
  "vuex": "^3.4.0"
},

dependecies안에  "@fortawesome/vue-fontawesome": "^2.0.6" 를 추가한다.

 

 

2. main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false

 

 

3. vue 컴포넌트

<font-awesome-icon icon="fa-solid fa-comments" />

template안에 써보고 잘 나오는지 확인하기! 특히 vue3.0은 버전정보도 잘 확인해보기!

 

 

 

4. 참고

https://fontawesome.com/icons

Font Awesome

https://www.npmjs.com/package/@fortawesome/vue-fontawesome

@fortawesome/vue-fontawesome