Vue.js3 - fontawesome prefix 에러 나는 경우

폰트어썸 공식 문서를 보고 Vue.js3 에 폰트어썸을 설치한 후 적용해보면, fas 관련 에러가 난다.

 

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

기본적으로 fas 로 설정이 되어 있어서 그런데, 이런 경우 

<font-awesome-icon icon="heart" />

이렇게 작성해 주면 된다.

 

명시적 방법과 묵시적(?)방법이 나뉘어져 있으므로 아래 코드를 참고하여 작성해주자.

<!-- explicit style -->
<!-- 만약 regular 이면 'far' 이런식으로 작성해주면 된다 -->
<font-awesome-icon :icon="['fas', 'phone']" />

<!-- implicit style (fas is assumed) -->
<font-awesome-icon icon="phone" />

 

 

 

javascript - Using Font Awesome in Vue 3 - Stack Overflow

Using Font Awesome in Vue 3