FontAwesome을 Vue.js에서 사용하는 방법

이번에는 Vue.js에서 Twitter 아이콘과 Github 아이콘을 사용하고 싶었습니다.
Brands아이콘을 사용할 때는 조금 다른 아이콘 사용과 달리, 구현에 막혔으므로 아래가 참고가 되면 기쁩니다.
※초보자가 쓰고 있으므로 실수등 있으면 가르쳐 주시면 다행입니다.

FontAwesome이란?

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

세련된 아이콘 등이 많이 모여 있습니다. 이미지 등을 설치하는 것보다 쉽습니다.
FontAwesome 공식 사이트

FontAwesome을 터미널에서 설치

먼저 터미널에서 개발중인 프로젝트로 이동하여 FontAwesome을 설치합니다.

% cd project-name

% npm install --save @fortawesome/fontawesome-svg-core 
% npm install --save @fortawesome/free-solid-svg-icons  
% npm install --save @fortawesome/free-regular-svg-icons
% npm install --save @fortawesome/free-brands-svg-icons

% npm install --save @fortawesome/vue-fontawesome

이번에 사용하고 싶은 Brands 아이콘은 free-brands-svg-icons의 한 줄입니다.
위의 4행은 자신이 사용하고 싶은 아이콘에 의해 인스톨 하지 않아도 좋은 것도 있습니다.
자세히 알고 싶은 분은 공식 사이트를 참고하는 것이 좋습니다.

main.js에 FontAwesome을 사용하기위한 설명

main.js

/* Font awesomeを導入 */
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas,fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
/* ここまで */

실제로 사용하기 위한 설명을 한다

우선 user-cicle라는 일반 아이콘을 표시해 보겠습니다.

About.vue

<p><font-awesome-icon icon="user-circle" />プロフィール</p>

이쪽은 제대로 표시되었습니다.

마찬가지로 트위터 아이콘도 표시해 보면 아무 것도 표시되지 않았습니다.

결과, 아래와 같이 기술할 필요가 있습니다.

About.vue

<font-awesome-icon :icon="['fab', 'twitter']" size="2x" color="#1da1f2"/>
<font-awesome-icon :icon="['fab', 'github']" size="2x" color="black"/>

그러면 표시되었습니다!



덧붙여서 색이나 크기를 변경하고 싶은 경우, 위와 같이 size 와 color 를 지정하는 것으로 변경할 수 있습니다.
또한, 이 트위터 아이콘이나 Qiita 아이콘에 자신의 계정을 연결시키고 싶은 경우, a 태그로 둘러싸는 것으로 구현할 수 있습니다.

About.vue

<a href="https://twitter.com/○○○○○○○"><font-awesome-icon :icon="['fab', 'twitter']" size="2x" color="#1da1f2"/></a>
<a href="https://github.com/○○○○○○○○"><font-awesome-icon :icon="['fab', 'github']" size="2x" color="black"/></a>

요약

공식 사이트를 보면 Vue.js 이외에서의 사용 방법도 세세하게 설명이 실렸습니다.
FontAwesome을 사용하면 세련된 아이콘도 많이 있으므로 꼭 사용해보세요!

이상