Vue.js에서 Font Awesome 사용하기

설치

항목으로 이동하고 명령 입력

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome

만약 다른 사용하고 싶은 아이콘이 있다면 적당히 추가

npm install --save @fortawesome/free-regular-svg-icons

npm install --save @fortawesome/pro-regular-svg-icons

npm install --save @fortawesome/free-brands-svg-icons

활용단어참조

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";

/**
 * 追加
 */
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faChevronRight,
  faChevronLeft
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faChevronRight, faChevronLeft);

Vue.component("font-awesome-icon", FontAwesomeIcon);

/**
 * ここまで
 */

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

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

library.add(fas, far, fab)

아이콘 표시

<span class="calender-header__prev">
  <font-awesome-icon icon="chevron-left"/>
</span>