소개

이 기사에 액세스 해 주셔서 감사합니다.
게시자는 프로그래밍 초보자이며, 이 방법이 '최적해'인지는 모릅니다.
그러나 동작은 검증되었습니다.

이런 방법도 할 수 있어 ~ 정도로 봐 주시면 다행입니다.

즉시 시작

우선은 Vue.js에서 FontAwesome을 사용할 때 필요한 5가지를 먼저 다운로드해 갑니다.
이 기사에서는 yarn으로 다운로드를 기재해 갑니다만, npm의 분은 npm의 다운로드 방법으로 부탁합니다.

yarn add --dev
@fortawesome/fontawesome-svg-core 
@fortawesome/free-brands-svg-icons　
@fortawesome/free-regular-svg-icons　
@fortawesome/free-solid-svg-icons　
@fortawesome/vue-fontawesome　

webpack의 entry 대상인 js(여기서는 main.js)에 아래의 코드를 추가합니다.

import { library } 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);
Vue.component('font-awesome-icon', FontAwesomeIcon);

FontAwesome 홈페이지에서 사용할 아이콘을 선택합니다.
이번에는 아래의 애플 아이콘을 예로 사용하고 싶습니다.

<div>
 <p>アップル</p>
  <font-awesome-icon
    :icon="['fab', 'apple']"
  />

이 코드로 Apple이라는 문자 옆에 아이콘을 배치할 수 있습니다.
포인트는: icon내의 기재를 상기 화상의 적색 화살표와 같이 쓰는 것입니다.

또한 아래와 같이 font-awesome-icon 태그에 옵션으로 크기와 색상을 추가할 수도 있습니다.

<div>
 <p>アップル</p>
  <font-awesome-icon
    :icon="['fab', 'apple']"
　　 style="color: red"
    size="2x"
  />

버튼의 아이콘으로 사용하고 싶은 경우는 아래와 같이 하면 OK입니다.

<div>
 <button @click="〇〇">
  <font-awesome-icon
    :icon="['fab', 'apple']"
　　 style="color: red"
    size="2x"
  />
 </button>

끝

수고하셨습니다. 이것으로 Vue.js의 FontAwesome 설정이 완료됩니다.

조금이라도 도움이 되었다고 생각하는 분이 있으면 LGTM을 부탁합니다 🙇‍♂️