Font Awesome
lastmod 2023-02-08created 2020-09-256 edits
Font Awesome is a font and icon toolkit based on CSS and Less. It was created by Dave Gandy for use with Bootstrap and was later integrated into BootstrapCDN.
How to use
Add the CDN as shown below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
NPM Package
How to use
Displaying an icon
Changing icon color
Changing icon size
<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배 크기 -->
Applying an icon border
Rotating icon orientation
<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 -->
Applying icon spin
<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>
Stacking icons
<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-->