아이콘 라이브러리 Font Awesome Icon (무료 버전)

 

 

라이브러리 소개

여러가지 다양한 아이콘을 간단하게 표시할 수 있다.

무료 버전인 Free, 유료 버전인 Pro가 있는데 그중에서 무료 버전으로 정리해보았다.

* 라이선스 정보 : MIT 

https://github.com/FortAwesome/vue-fontawesome?tab=MIT-1-ov-file#readme

GitHub - FortAwesome/vue-fontawesome: Font Awesome Vue component

 

 

라이브러리 사용

 

라이브러리 설치

복사후 터미널에서 Shift + Insert 단축키 -> 엔터 입력

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

 

 

 

라이브러리 세팅

main.js 파일에 다음과 같이 작성

/* 공통 */
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);

/* 폰트어썸 */
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fas, far, fab);
dom.watch(); 

/* 전역 컴포넌트에 추가 */
app.component('FontAwesomeIcon', FontAwesomeIcon);

/* 공통 */
app.mount('#app');

 

 

 

라이브러리 사용

 

기본

<font-awesome-icon icon="fa-solid fa-아이콘명" />

 

 

예제

 

<template>
  <button @click="isActive = !isActive">active status : {{ isActive }}</button>
  <br /><br />
  <div>
    font-awesome-icon 태그 :
    <font-awesome-icon
      :icon="isActive ? 'fa-solid fa-star' : 'fa-regular fa-star'"
    />

    <!-- 
    
    #. font-awesome-icon 외 다른 태그를 사용할경우
    
      main.js 파일에서 dom.watch()를 사용함으로써 font-awesome-icon 태그가 아니어도 사용 가능 
      단, font-awesome-icon 태그와 다른점은 다음과 같다
      
      1. 최초 랜더링된 이후, 클래스명이 변경되었을때
         변경된 클래스명의 아이콘으로 업데이트되지않는다 
         * 필요시 v-if 등으로 재랜더링을 해줘여하는 번거로음이 발생한다

    -->
    <div>
      그외 태그 :
      <div :class="isActive ? 'fa-solid fa-star' : 'fa-regular fa-star'"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const isActive = ref(false);
</script>

 

 

참고

https://fontawesome.com/search?o=r&m=free

Font Awesome

 

 

위 링크를 통해 사이트 접속후 원하는 아이콘을 클릭

아이콘을 클릭했다면 위와 같은 모달이 나타나게된다

VUE 탭을 누르고, 탭 하단에 3개의 텍스트 버튼중 " String Syntax " 버튼을 누른다

그리고 <font-awesome-icon ...&nbsp; 이 글자에 마우스를 올리면 위와 같이 메시지가 나타난다.&nbsp; 클릭해주면 복사가 된다.

 

<template>
	<!-- 복사된 내용 붙여넣기 -->
    <!-- 
    	예시)
        <font-awesome-icon icon="fa-solid fa-house" />
   -->
</template>

<script setup>

</script>