기본 사용 방법

설치

1. 기본 Font Awesome SVG라이브러리를 설치한다.

npm i --save @fortawesome/fontawesome-svg-core

2. 다음 Font Awesome 아이콘 패키지를 설치한다.

Font Awesome Free Solid를 사용하지만 더 많은 아이콘 세트를 사용할 수 있다.

npm i --save @fortawesome/free-solid-svg-icons

3. 그런 다음 Font Awesome Vue 구성 요소를 설치해야 한다 (vue-fontawesome).

Font Awesome이 Vue 2에서 작동하도록 하는 기능이 포함된 패키지이다.

npm i --save @fortawesome/vue-fontawesome

Vue Font Awesome 가져오기

첫 번째 아이콘을 렌더링하기 전에 새로 설치된 종속성을 프로젝트로 가져와야 합니다. src/main.js 파일에 다음을 입력한다.

import { library } from '@fortawesome/fontawesome-svg-core'

import { faHatWizard } from '@fortawesome/free-solid-svg-icons'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

아이콘 렌더링 하기

구성 요소 폴더로 이동한 다음 HelloWorld.vue 파일을 연다.

HelloWorld.vue 파일에서 템플릿에 <h1><font-awesome-icon icon=”hat-wizard” /></h1> 추가를 한다.

<template>
  <div>
    <h1><font-awesome-icons icon="HatWizard" /></h1>
  <div>
</template>

편집한 모든 파일을 저장하고 확인하면 나오는 것을 알 수 있다.

참고 사이트

How To Use Vue.js With Font Awesome

https://www.npmjs.com/package/@nuxtjs/fontawesome

Vuetify 및 Nuxt.js에서 Font-Awesome SVG를 사용하는 방법

1. npm i -D @fortawesome/fontawesome-free입력한다.

npm i -D @fortawesome/fontawesome-free

2. package.json 파일 체크한다.

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2"
}

3. nuxt.config.js 파일에 적용한다.

vuetify: {
    defaultAssets: {icons: 'fa'}
}

끝이다. 이러면 바로 사용 가능하다.