Learn advanced FontAwesome usage tips, animations, and best practices
Optimize loading with selective imports:
Brand icons use the fa-brands prefix:
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-vuejs"></i>
<i class="fa-brands fa-react"></i>
<i class="fa-brands fa-weixin"></i>Email clients have limited Web Font support:
Ensure icons are friendly to assistive technologies:
aria-hidden="true" to decorative iconsrole="img" and aria-label to functional icons<title> descriptions for SVG iconsUse CSS color property to change icon color:
<i class="fa-solid fa-heart" style="color:red"></i>
<i class="fa-solid fa-star" style="color:gold"></i>Add shadows to icons with CSS text-shadow:
.fa-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}FontAwesome integrates seamlessly with Bootstrap via CDN:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">Use SVG framework's fa-layers to overlay multiple icons:
<span class="fa-layers fa-fw">
<i class="fa-solid fa-circle" style="color:tomato"></i>
<i class="fa-solid fa-xmark fa-inverse" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fa-solid fa-circle" style="color:green"></i>
<i class="fa-solid fa-check fa-inverse" data-fa-transform="shrink-6"></i>
</span>Use icons in CSS pseudo-elements by importing SVG JS and using the content property:
.my-icon::before {
content: '\\f015';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}Use fa-xs to fa-10x classes to control icon size:
<i class="fa-solid fa-camera fa-xs"></i> Extra Small
<i class="fa-solid fa-camera fa-sm"></i> Small
<i class="fa-solid fa-camera fa-lg"></i> Large
<i class="fa-solid fa-camera fa-2x"></i> 2x
<i class="fa-solid fa-camera fa-3x"></i> 3x
<i class="fa-solid fa-camera fa-5x"></i> 5x
<i class="fa-solid fa-camera fa-10x"></i> 10xUse fa-rotate-90/180/270 classes to rotate icons:
<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>
<i class="fa-solid fa-arrow-right fa-rotate-270"></i>Use fa-flip-horizontal/vertical/both classes to flip icons:
<i class="fa-solid fa-arrows-left-right fa-flip-horizontal"></i>
<i class="fa-solid fa-arrows-left-right fa-flip-vertical"></i>
<i class="fa-solid fa-arrows-left-right fa-flip-both"></i>FontAwesome provides 6 built-in animation classes: