HTML에서 fontawesome 아이콘을 사용하는 방법입니다.(V5)
fontawesome에서 제공하는 CDN를 활용하면 쉽고 빠르게 아이콘을 사용할 수 있습니다.
1. head 태그에 아래 script를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
</head>
<body></body>
</html>
2. fontawesome 사이트에 접속합니다.
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
3. 좌측상단의 검색창에서 원하는 아이콘의 키워드를 검색합니다.
4. 검색된 아이콘을 클릭한 후 <i> 태그를 복사합니다. (아이콘에 pro가 붙어있으면 유료, 붙어있지 않으면 무료입니다)
5. 복사한 <i> 태그를 html에 붙여 넣습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
</head>
<body>
<div>
<i class="fas fa-smile"></i>
</div>
</body>
</html>
6. fontawesome 문서를 참고하여 여러 가지 스타일을 쉽게 적용할 수 있습니다.
https://fontawesome.com/docs/web/style/styling
Styling with Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
사이즈
<i class="fas fa-smile fa-10x"></i>
회전
<i class="fas fa-smile fa-10x fa-rotate-90"></i>
애니메이션
<i class="fas fa-smile fa-10x fa-spin"></i>
색상
색상은 클래스 유틸로 제공되지 않으므로 <i> 태그를 <div> 태그로 감싼 후 스타일을 적용하는 것을 추천드립니다.
<div style="color: skyblue">
<i class="fas fa-smile fa-10x"></i>
</div>
