[Icon] Vue에서 Font Awesome 사용하기

 

안녕하세요. 🐸

Font Awesome에 대해 추가로 포스팅하려고 합니다.

실질적인 내용은 2편과 동일하나 이번에는 Vue.js(앞으로 Vue라고 줄일게요)에서 Font Awesome의 Icon을 적용하는 법에 대한 내용입니다.

아래 링크는 제가 이전에 Font Awesome에서 대해 포스팅한 글이니 잘 모르시는 분들은 확인하시고 다음 내용을 보시면 될 것 같습니다.

 

https://haguri-peng.tistory.com/117

[Icon] Font Awesome (1. 계정 및 Kit 만들기)

 

https://haguri-peng.tistory.com/118

[Icon] Font Awesome (2. 사용하기)

 

자.. 그럼 시작해보겠습니다!

 

 

🚠 샘플 확인

 

 

샘플은 총 9개이며,

제가 2편에서 작업한 내용을 토대로 Vue로 다시 작업해봤습니다.

적용 방법에 대한 원문은 아래 링크를 참조해주시면 됩니다.

 

https://fontawesome.com/docs/web/use-with/vue/style

Adding Icon Styling with Vue

 

 

⚔️ 사용하기 전 세팅

 

보통 src 폴더에 main.js(src/main.js)에 아래 코드와 같이 세팅되어 있는 부분이 있을 겁니다.

 

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

 

이 부분에 Fontawesome 관련 코드를 추가해주면 되는데요.

코드를 추가하기 전에 다음의 Dependency를 먼저 추가해야 합니다.

 

package.json내의 dependencies

 

@fortawesome/fontawesome-svg-core

@fortawesome/free-brands-svg-icons

@fortawesome/free-regular-svg-icons

@fortawesome/free-solid-svg-icons

@fortawesome/vue-fontawesome

 

위 5개의 dependency를 추가하였으면 이제 다시 main.js를 보겠습니다.

 

import { createApp } from 'vue';
import App from './App.vue';

// ========== 추가해주는 부분 Start ========== //
// import the fontawesome core
import { library } from '@fortawesome/fontawesome-svg-core';

// import font awesome icon component
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// import specific icons
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

// add icons to the library
library.add(fas, far, fab);
// ========== 추가해주는 부분 End ========== //

createApp(App)
  .component('font-awesome-icon', FontAwesomeIcon) // <-- FontAwesome Component 추가
  .mount('#app');

 

위의 코드에서 '추가해주는 부분'이라고 되어 있는 코드를 추가해주고,

맨 마지막에 있는 .mount 부분 위에 FontAwesome Component를 추가해주면 준비는 끝납니다.

 

아래 링크에 해당 내용이 있으니 참고 바랍니다.

https://fontawesome.com/docs/web/use-with/vue/add-icons

Add Icons with Vue

 

728x90

 

 

🪓 사용해보기

 

  - 일반적인 사용

 

위에서 'font-awesome-icon'로 세팅했기 때문에 <font-awesome-icon> 태그를 넣어 사용하시면 됩니다.

 

<font-awesome-icon icon="fa-solid fa-star" />
<font-awesome-icon icon="fa-regular fa-clock" />
<font-awesome-icon icon="fa-solid fa-circle" />
<font-awesome-icon icon="fa-solid fa-desktop" />
<font-awesome-icon icon="fa-regular fa-circle-pause" />
<font-awesome-icon icon="fa-brands fa-twitter" />
<font-awesome-icon icon="fa-brands fa-square-facebook" />
<font-awesome-icon icon="fa-brands fa-instagram" />
<font-awesome-icon icon="fa-brands fa-tiktok" />
<font-awesome-icon icon="fa-brands fa-github" />

 

 

기존 HTML과 다르게 Vue에서는 class가 아니라 icon 속성에 값을 넣어줘야 합니다.

 

'email'로 검색했을 때 두 번째로 나옵니다. 😄

 

그리고 위 이미지처럼 FontAwesome 페이지에서 해당 Icon을 선택하여 쉽게 가져올 수도 있는데요.

[Vue] 탭을 클릭하면 이미지와 같이 관련 태그 정보가 나오고

클릭하면 해당 태그가 복사가 되어 쉽게 사용할 수 있습니다.

 

 

  - 기본 스타일링 (색상 변경)

 

색상을 변경하고 싶으면,

밖에서 span 태그로 감싸서 style을 지정하거나

직접 font-awesome-icon 태그 내에 style을 지정하여 색상을 변경할 수 있습니다.

 

<span style="color: tomato">
  <font-awesome-icon icon="fa-solid fa-star" />
</span>
<span style="color: cyan">
  <font-awesome-icon icon="fa-solid fa-circle" />
</span>
<font-awesome-icon icon="fa-brands fa-twitter" style="color: dodgerblue" />
<font-awesome-icon icon="fa-brands fa-tiktok" style="color: purple" />

 

 

 

  - 크기 변경

 

<font-awesome-icon icon="fa-solid fa-star" />
<font-awesome-icon icon="fa-regular fa-clock" size="lg" />
<font-awesome-icon icon="fa-solid fa-circle" size="xl" />
<font-awesome-icon icon="fa-solid fa-desktop" size="2x" />
<font-awesome-icon icon="fa-regular fa-circle-pause" size="3x" />
<font-awesome-icon icon="fa-brands fa-twitter" />
<font-awesome-icon icon="fa-brands fa-square-facebook" />
<font-awesome-icon icon="fa-brands fa-instagram" size="4x" />
<font-awesome-icon icon="fa-brands fa-tiktok" />
<font-awesome-icon icon="fa-brands fa-github" size="5x" />

 

 

크기 변경은 'size'라는 속성을 추가해야 합니다.

 

 

  - 너비 고정

 

'fixed-width' 라는 속성을 넣기만 하면 됩니다.

 

<font-awesome-icon
  icon="fa-solid fa-desktop fa-fw"
  style="
    background-color: skyblue;
    border: 1px solid black;
    padding: 0.3rem;
  "
/>
<font-awesome-icon
  icon="fa-brands fa-twitter"
  style="border: 1px solid black; border-radius: 1rem; padding: 0.3rem"
/>
<font-awesome-icon
  icon="fa-brands fa-twitter"
  fixed-width
  style="border: 1px solid black; border-radius: 1rem; padding: 0.3rem"
/>

 

 

 

  - Icons in a List

 

<ol class="fa-ul">
  <li>
    <span class="fa-li">
      <font-awesome-icon icon="fa-solid fa-check-square" />
    </span>
    1
  </li>
  <li>
    <span class="fa-li">
      <font-awesome-icon icon="fa-solid fa-check-square" />
    </span>
    2
  </li>
  <li>
    <span class="fa-li">
      <font-awesome-icon icon="fa-solid fa-spinner" pulse />
    </span>
    3
  </li>
  <li>
    <span class="fa-li">
      <font-awesome-icon icon="fa-regular fa-square" />
    </span>
    4
  </li>
</ol>

 

 

위와 같이 List 내에 Icon을 넣을 수 있습니다. 이건 기존 HTML 방식과 태그명만 다르지 동일합니다.

 

 

  - 회전

 

'rotation' 속성을 넣어서 회전할 수 있습니다.

'flip' 속성을 넣어서 뒤집히게 만들 수도 있습니다.

 

 

<font-awesome-icon icon="fa-brands fa-twitter" size="3x" rotation="270" />
<font-awesome-icon
  icon="fa-brands fa-square-facebook"
  size="3x"
  rotation="180"
/>
<font-awesome-icon
  icon="fa-brands fa-instagram"
  size="3x"
  flip="vertical"
/>
<font-awesome-icon icon="fa-brands fa-tiktok" size="3x" flip="horizontal" />
<font-awesome-icon
  icon="fa-brands fa-github"
  size="3x"
  style="transform: rotate(30deg)"
/>

 

 

그리고 커스텀하게 회전 각도를 주려면,

style 속성에 'transform: rotate(각도)'를 주시면 각도(Ex: 30deg)를 지정할 수 있습니다.

 

 

  - 애니메이션

 

Beat, Fade, Bounce 등 여러 애니메이션을 적용할 수 있습니다.

 

<font-awesome-icon icon="fa-solid fa-heart" size="3x" beat />
<font-awesome-icon icon="fa-solid fa-magnifying-glass" size="3x" fade />
<font-awesome-icon icon="fa-solid fa-circle-info" size="3x" beat-fade />
<font-awesome-icon icon="fa-solid fa-arrow-up" size="3x" bounce />
<font-awesome-icon
  icon="fa-solid fa-book"
  size="3x"
  flip
  style="--fa-animation-duration: 3s"
/>
<font-awesome-icon icon="fa-solid fa-stopwatch" size="3x" shake />
<font-awesome-icon
  icon="fa-solid fa-spinner"
  size="3x"
  spin-pulse
  spin-reverse
/>

 

실제론 움직입니다 😅

 

 

 

  - Bordered and Pulled Icons

 

Icon을 한쪽(left or right)으로 치우치게 하는 옵션입니다.

pull 속성과 값을 주고, border 속성을 추가하면 주위에 경계선이 생깁니다.

 

<font-awesome-icon
  icon="fa-regular fa-clock fa-3x fa-border fa-pull-right"
  size="3x"
  border
  pull="right"
/>

 

 

 

  - Stacking

 

두 개의 Icon을 하나로 합치는 것인데..

Vue에서는 제가 못 찾는 것인지 모르겠으나 별 다른 설명도 없고 구현되지 않은 것 같습니다. 😥

(HTML에서는 가능)

 

Layers에서 합치는 것을 구현할 수 있으니 제가 작성한 다른 포스팅을 참조바랍니다.

https://haguri-peng.tistory.com/146

[Icon] Vue에서 Font Awesome 사용하기 2 (use Layers)

 

 

🔑 소스 확인

 

Vue 소스는 CodeSandbox에서 작성한 내용입니다.