Font Awesome
Font Awesome은 CSS 및 Less를 기반으로하는 글꼴 및 아이콘 툴킷입니다. Dave Gandy가 Bootstrap과 함께 사용하도록 만들어졌으며 나중에 BootstrapCDN에 통합되었습니다.
How to use
아래와 같이 CDN을 추가한다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
NPM Package
How to use
아이콘 출력
아이콘 색상 변경
아이콘 크기 변경
<i class="fa fa-camera fa-lg"></i> <!-- 33% 크기 -->
<i class="fa fa-camera fa-2x"></i> <!-- 2배 크기 -->
<i class="fa fa-camera fa-3x"></i> <!-- 3배 크기 -->
<i class="fa fa-camera fa-4x"></i> <!-- 4배 크기 -->
<i class="fa fa-camera fa-5x"></i> <!-- 5배 크기 -->
아이콘 테두리 적용
아이콘 방향 회전
<i class="fa fa-shield"></i>
<!-- normal -->
<i class="fa fa-shield fa-rotate-90"></i>
<!-- fa-rotate-90 -->
<i class="fa fa-shield fa-rotate-180"></i>
<!-- fa-rotate-180 -->
<i class="fa fa-shield fa-rotate-270"></i>
<!-- fa-rotate-270 -->
<i class="fa fa-shield fa-flip-horizontal"></i>
<!-- fa-flip-horizontal -->
<i class="fa fa-shield fa-flip-vertical"></i>
<!-- fa-flip-vertical -->
아이콘 회전 적용
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>
아이콘 중첩
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<!--fa-twitter on fa-square-o-->
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<!--fa-flag on fa-circle-->
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<!--fa-terminal on fa-square-->
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
<!--fa-ban on fa-camera-->