<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
댓글 없음:
댓글 쓰기