1. Find an icon
You can browse through the entire collection of icons on Font Awesome. We only have access to the free collection, so make sure to filter by “Free” icons.
When you have found an icon to use, go ahead and click on it. You will be directed to the icon page with several options.
On the icon page hover over the HTML code and click it to copy onto the clipboard.
2. Adding an icon
To add an icon, you can paste the code from the icon page. It should be an i tag following this pattern:
<i class="fa fa-icon-name"></i>In the code above replace “icon-name” with one of the icon’s name from here. For example, to display the “cat” icon use this code:
<i class="fa fa-cat"></i>this will render:
3. Sizing
To display the icons in different sizes use one of the classes below with your icon code:
- fa-lg
- fa-2x
- fa-3x
- fa-4x
- fa-5x
Example:
<i class="fa fa-cat fa-lg"></i>
<i class="fa fa-cat fa-2x"></i>
<i class="fa fa-cat fa-3x"></i>
<i class="fa fa-cat fa-4x"></i>
<i class="fa fa-cat fa-5x"></i>
4. Color
You can also change colors on these icons. Add the following snippet of CSS to individual icons:
<i style="color:red;" class="fa fa-cat"></i>this will render the cat in red color:
If you wanted the cat could be larger and red:
<i style="color:red;" class="fa fa-cat fa-5x"></i>
5. COVID—19 icons
Font Awesome being very awesome decided to release coronavirus related icons today. Full collection of COVID—19 icons.
6. Badges
1
2
3
A
B
7. Badges with icons
8. Custom labels
Primary Label
Secondary Label
Success Label
Alert Label
Warning Label
9. Custom labels with icons
Alert Label
Warning Label
Default Label
<span class="label alert"><i class="fa-x-circle"></i> Alert Label</span>
<span class="label warning"><i class="fa-x"></i> Warning Label</span>
<span class="label"><i class="fa-widget"></i> Default Label</span>
10. Tooltips
Here is an example of a tooltip feature within stories. The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.
The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.