2022.11.29 - [FRONT-END/TIP & ETC] - Font Awesome(폰트어썸) 무료버전 4.7 CDN 사용방법
Font Awesome(폰트어썸) 무료버전 4.7 CDN 사용방법
Font Awesome은 인터넷으로 제공되는 아이콘 라이브러리 툴킷이라고 생각하시면 됩니다. 예전에는 아이콘을 사용하려면 직접 아이콘 파일을 서버에 올려서 사용했다면 Font Awesome을 이용하면 가져
devnam.tistory.com
이전글 Font Awesom 기본 사용법에 이어서 심화(?) 사용법을 다뤄보겠습니다.
기본
<i class="fa fa-plane"></i>크기변경
<i class="fa fa-plane fa-lg"></i>
<i class="fa fa-plane fa-2x"></i>
<i class="fa fa-plane fa-3x"></i>
<i class="fa fa-plane fa-4x"></i>
<i class="fa fa-plane fa-5x"></i>크기는 각각 기본으로부터 fa-lg는 33%, fa-2x 2배, fa-3x 3배, fa-4x 4배, fa-5x 5배 증가된 크기입니다.
색상변경
<i class="fa fa-car" style="color:red"></i>
<i class="fa fa-car" style="color:blue"></i>
<i class="fa fa-car" style="color:green"></i>style color 속성에 원하는색상코드를 넣어주면됩니다.
회전
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>회전은 fa-rotate-90 90도, fa-rotate-180 180도, fa-rotate-270 270도, fa-flip-horizontal 수평반전, fa-flip-vertical 수직반전입니다.
애니메이션
애니메이션은 기본적으로 회전만 제공하므로 추가 제공하는 css를 사용하면 더 많은 효과를 사용할 수 있습니다. 아래 코드를 <head></head> 사이에 넣은뒤 사용하면됩니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css"><i class="fa fa-wrench faa-wrench animated"></i>faa-wrench
<i class="fa fa-bell faa-ring animated"></i>faa-ring
<i class="fa fa-envelope faa-horizontal animated"></i>faa-horizontal
<i class="fa fa-envelope faa-horizontal animated faa-reverse"></i>faa-horizontal reverse
<i class="fa fa-thumbs-o-up faa-vertical animated" ></i>faa-vertical
<i class="fa fa-warning faa-flash animated"></i>faa-flash
<i class="fa fa-thumbs-o-up faa-bounce animated"></i>faa-bounce
<i class="fa fa-thumbs-o-down faa-bounce faa-reverse animated"></i>faa-bounce reverse
<i class="fa fa-spinner faa-spin animated"></i>faa-spin
<i class="fa fa-spinner faa-spin faa-reverse animated"></i>faa-spin reverse
<i class="fa fa-plane faa-float animated"></i>faa-float
<i class="fa fa-heart faa-pulse animated"></i>faa-pulse
<i class="fa fa-envelope faa-shake animated"></i>faa-shake
<i class="fa fa-trophy faa-tada animated"></i>faa-tada
<i class="fa fa-space-shuttle faa-passing animated"></i>faa-passing
<i class="fa fa-space-shuttle faa-passing faa-reverse animated"></i>faa-passing reverse
<i class="fa fa-circle-o faa-burst animated"></i>faa-burst
<i class="fa fa-star-o faa-falling animated"></i>faa-falling
<i class="fa fa-star-o faa-falling faa-reverse animated"></i>faa-falling reverse
<i class="fa fa-star-o faa-rising animated"></i>faa-rising
//속도
<i class="fa fa-spinner faa-spin faa-reverse animated faa-fast"></i>
<i class="fa fa-spinner faa-spin faa-reverse animated faa-slow"></i>애니메이션은 <i class="fa 아이콘명 애니메이션명 [reverse] animated [속도]> 로 사용하시면 됩니다. ([ ] 값은 생략가능)
faa-wrench faa-ring faa-horizontal faa-horizontal reverse faa-vertical faa-flash faa-bounce faa-bounce reverse faa-spin faa-spin reverse faa-float faa-pulse faa-shake faa-tada
faa-passing faa-passing reverse faa-burst faa-falling faa-falling reverse faa-rising
fast slow
앞서 다뤄본 여러효과들을 잘 응용하여 알맞게 사용하시길 바랍니다.
'FRONT-END > TIP & ETC' 카테고리의 다른 글
| Spring Boot : Swagger 적용 및 기본 사용법 (0) | 2022.12.22 |
|---|---|
| Font Awesome(폰트어썸) 무료버전 4.7 CDN 사용방법 (0) | 2022.11.29 |
댓글