Font Awesone 의 CSS 아이콘 사용하기

아이콘 스타일시트의 CDN 주소를 <head></head> 사이에 넣는다.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



아이콘을 쓰려면 아래와 같이 2가지 방식으로 쓸 수 있다.

<i class="fas fa-stroopwafel"></i> <!-- 1) 무료는 fas 와함께 아이콘 이름을 씀 -->
<i class="fas fa-stroopwafel"></i> <!-- <i> 를 쓰거나 -->
<span class="fas fa-stroopwafel"></span> <!-- <span> 을 써서 아이콘 삽입 -->


아이콘의 크기는 fa-xs  ~ fa-10x 까지 설정가능하다

<i class="fas fa-stroopwafel fa-xs"></i>
<i class="fas fa-stroopwafel fa-sm"></i>
<i class="fas fa-stroopwafel fa-lg"></i>
<i class="fas fa-stroopwafel fa-2x"></i>
<i class="fas fa-stroopwafel fa-3x"></i>
<i class="fas fa-stroopwafel fa-5x"></i>
<i class="fas fa-stroopwafel fa-7x"></i>
<i class="fas fa-stroopwafel fa-10x"></i>



아이콘 컬러를 입히려면 span 으로 컬러코드를 주면 된다.

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-stroopwafel"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-stroopwafel"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-stroopwafel"></i>
  </span>
</span>


아이콘은 회전을 시키거나 flipping(상하좌우 반전)

<div class="fa-4x">
  <i class="fas fa-magic" data-fa-transform="rotate-90" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-180" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-30" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="rotate--30" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="flip-v" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="flip-h" style="background:MistyRose"></i>
  <i class="fas fa-magic" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>


자 이제 사용법은 알았으니 어떤 아이콘을 쓸수있는지 여기서 아이콘 이름을 찾자.

https://fontawesome.com/icons?d=gallery