[vue.js] FontAwesome 폰트어썸 사용

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마다 디자이너에게 요청하면 상당히 눈치가 보일것 같네요. 그렇다고 포토샵을 열어서 아이콘을 만들수도 없고 이때 사용할수 있는 유용한 웹 아이콘 폰트 라이브러리가 있습니다. Font Awesome 이라는 라이브러리 인데요 웹 아이콘 폰트 시장에서 가장 인기있는 라이브러리 입니다. 이번 시간에는 Vue.js 에서 Font Awesome 을 사용하는 방법에 대해서 알아 보겠습니다.

설치

Vue.js 프로젝트를 생성했다고 가정하고 font awesome 을 추가 설치 하는 방법입니다. yarn 또는 npm 둘중 하나의 방법을 이용해 라이브러리를 추가해 주세요

yarn을 이용한 설치

yarn 을 이용한 설치 방법입니다.

yarn add @fortawesome/fontawesome-free

npm 설치 방법

npm을 이용한 설치 방법 입니다.

npm install --save @fortawesome/fontawesome-free

main.js 수정

main.js 에  import '@fortawesome/fontawesome-free/js/all.js' 코드를 추가합니다.

 

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import App from './App.vue'
 
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

사용법

vue.js template 부분에 아래와 같이 코드를 작성하시면 아이콘이 출력됩니다.

<i class="fa fa-bus"></i>
<i class="fas fa-ambulance"></i>
<i class="fas fa-hotel"></i>

 

실습

componets 에 FontAwesome.vue파일을 생성하고 아래와 같이 입력합니다.

<template>
  <div style="margin-top:40px">
    <i class="fa fa-bus fa-lg"></i>
    <i class="fas fa-ambulance fa-2x"></i>
    <i class="fas fa-hotel fa-4x"></i>
  </div>
</template>
 
<script>
export default {
  name: "FontAwesome"
}
</script>
 
<style scoped>
 
</style>

router/basic.js 파일에 추가한 컴포넌트의 path를 지정합니다. (page2 라고 지정함)

import HelloWorld from "@/components/HelloWorld";
import Page1 from "@/components/Page1";
import FontAwesome from "@/components/FontAwesome";
 
const basic = [
    {path: '/', name: 'index', component: HelloWorld},
    {path: '/hello-world', name: 'HelloWorld', component: HelloWorld},
    {path: '/page1', name: 'Page1', component: Page1},
    {path: '/page2', name: 'FontAwesome', component: FontAwesome},
];
 
export default basic;

App.vue에 추가한 페이지 page2에 대한 라우터 링크를 추가합니다.

<template>
  <div id="app">
    <router-link to="/hello-world">hello</router-link> |
    <router-link to="/page1">page1</router-link> |
    <router-link to="/page2">page2</router-link> |
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
</style>

실행결과