Get Started
Need to get icons in your web project quickly? Here’s the fastest and easiest way to use Font Awesome in your web-based projects (keep in mind you can use Font Awesome in lots of other ways, including on the desktop).
We’ll cover the basics of setting up Font Awesome and finding that perfect icon for your project.
1. Setup Font Awesome in Your Project
Section titled “1. Setup Font Awesome in Your Project”Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit embed code to the head
of each template or page of your project where you want to add icons.
2. Find and Add Icons
Section titled “2. Find and Add Icons”Browse the thousands of icons in Font Awesome 5 to find some icons you like and then add the icon name and style as CSS classes to an HTML <i>
tag.
<body> <!-- solid style --> <i class="fas fa-user"></i>
<!-- regular style --> <i class="far fa-user"></i>
<!-- light style --> <i class="fal fa-user"></i>
<!-- duotone style --> <i class="fad fa-user"></i>
<!--brand icon--> <i class="fab fa-github-square"></i></body>
3. Make It Awesome
Section titled “3. Make It Awesome”Now you’re ready to Rock and Roll! Take it to 11 by adding some style.
Hit a Snag?
Section titled “Hit a Snag?”Double-Check Your Code
Section titled “Double-Check Your Code”If your <i>
tags aren’t turning into icons, make sure you’ve got the Kit embed code on the pages or templates you’re working with.
Get More Help
Section titled “Get More Help”Check out the troubleshooting section to get answers to some common hiccups.