[Vuejs] fontawesome 사용하기(npm)

1. 설치

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

main.js

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

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

.vue

<template>
    ..
    <font-awesome-icon :icon="['fas','heart']"/> //solid 아이콘 사용
    ..
</templae>

<script>
	... 
</script>

<style>
	...
</style>

 

2. 아이콘 검색 및 적용

https://fontawesome.com/v5.15/icons?d=gallery&p=2

Font Awesome

아이콘 타입

• fas - solid (속이 꽉 찬 것) 
• far - regular (속이 빈 것)

  <font-awesome-icon :icon="['fas','heart']"/> // solid 아이콘 사용
  <font-awesome-icon :icon="['far','heart']"> // regular 아이콘 사용

   

검색 시 아래와 같이 확인된 태그를 위의 코드로 적용 함.

<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>

 

3. 크기, 색 지정

<font-awesome-icon :icon="['far','heart']" size="lg" :style="{ color: 'red' }" />

그냥 css로 지정해줘도 상관없는 듯 함.