[vue.js] Font Awesome 색상 사이즈 변경방법

vue.js 기반 환경에서 폰트어썸 설정하는 방법은 아래 내용을 참고하세요.  

2021.08.19 - [Language/Vue.js] - vuejs에 폰트어썸 사용

vuejs에 폰트어썸 사용

폰트어썸은 svg vector 를 이용하므로 아이콘의 색상 및 사이즈 변경이 가능합니다.

 

소스코드

<template>
  <div>
    <ul>
      <li>
        아이콘을 출력해 봅니다. <i class="fa fa-bus"></i>
      </li>
      <li>
        아이콘의 색상을 변경해 봅니다. <i class="fa fa-bus" style="color:blue"></i>
      </li>
      <li>
        아이콘의 크기를 변경해 봅니다.
        <i class="fa fa-bus"></i>
        <i class="fa fa-bus fa-lg"></i>
        <i class="fa fa-bus fa-2x"></i>
        <i class="fa fa-bus fa-3x"></i>
        <i class="fa fa-bus fa-4x"></i>
        <i class="fa fa-bus fa-5x"></i>
        <i class="fa fa-bus fa-6x"></i>
      </li>
      <li>
        아이콘의 테두리를 적용합니다. <i class="fa fa-bus fa-border"></i>
      </li>
      <li>
        아이콘의 방향을 변경합니다.
        <i class="fa fa-bus"></i>
        <i class="fa fa-bus fa-rotate-90"></i>
        <i class="fa fa-bus fa-rotate-90"></i>
        <i class="fa fa-bus fa-rotate-180"></i>
        <i class="fa fa-bus fa-rotate-270"></i>
        <i class="fa fa-bus fa-flip-horizontal"></i>
        <i class="fa fa-bus fa-flip-vertical"></i>
      </li>
      <li>
        아이콘을 회전합니다.
        <i class="fa fa-bus fa-spin fa-lg"></i>
      </li>
      <li>
        아이콘을 중첩합니다.
        <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-bus fa-stack-1x fa-inverse"></i>
        </span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "FontAwesome2"
}
</script>
 
<style>
li {
  text-align: left;
}
</style>

실행결과