[Vue.js] Font Awesome Icon 적용

아이콘을 쓰려는데 png는 싫고 svg를 쓰자니 어려울 때 fontawesome을 적용해보는 것도 방법이라 생각했다.

 

1. 설치

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

필요한 것들을 설치해야한다.

@fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome, @fortawesome/free-solid-svg-icons

이렇게 세 개를 설치했다.

하나라도 없으면 안 되는건가 싶어서 한 개씩, 두 개씩 설치하고 지우고 해봤는데 적용이 안 된다.

그냥 이유가 있겠거니 하고 쓸걸...

 

2.  main.js에 내용 추가

import { createApp } from 'vue'
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas)
dom.watch();

createApp(App).component("font-awesome-icon", FontAwesomeIcon).mount('#app')

 

3. 사용

<template>
    <div>
    	<i :class='["fa-solid", "fa-angle-up"]' />
    </div>
</template>

적용된 아이콘

아이콘을 바꿔주고 싶을 땐 클래스 이름을 바꿔주면 된다.

 

 

여기에서 참고했음.

끝!