728x90
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
아이콘 타입
- 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로 지정해줘도 상관없는 듯 함.
'Setting Guide' 카테고리의 다른 글
[Vuejs] TypeScript 추가 & 설정 (0) | 2022.03.31 |
---|---|
[Vue.js] Nuxt.js - 기본 프로젝트 구조 (0) | 2022.02.17 |
[Vue.js] Nuxt.js - 설치하기 (0) | 2022.02.14 |
[가이드] code Formatter(ESLint,Prettier 설정) (0) | 2022.01.21 |
[가이드] Vue CLI 사용 (0) | 2022.01.21 |