Font Awesome 5
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
Overview #
Thedir includes the world's most popular and easiest to use icon set - Font Awesome 5 - with over 1,340 free icons.
How to use? #
Place this code, which contains everything you need, within the
<head> of each template or page
that you want to use Font Awesome on.
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">You need to know two bits of information to reference an icon:
- Its name, prefixed with
fa- - The style you want to use's corresponding prefix.
<span class="fas fa-stroopwafel"></span>
<!--
1) style prefix == fas
2) icon name == stroopwafel
-->| Style | Availability | Style Prefix | Example | Rendering |
|---|---|---|---|---|
| Solid | Free | fas |
<span class="fas fa-image"></span>
|
|
| Regular | Free | far |
<span class="far fa-image"></span>
|
|
| Light | Pro Required | fal |
<span class="fal fa-image"></span>
|
|
| Brands | Free | fab |
<span class="fab fa-image"></span>
|
Examples #
<span class="fab fa-android text-primary"></span>
<span class="fas fa-car text-secondary"></span>
<span class="fas fa-chart-pie text-success"></span>
<span class="far fa-clock text-danger"></span>
<span class="fas fa-comment-alt text-info text-warning"></span>
<span class="fas fa-flag text-dark"></span>Sizes #
Need larger or smaller icons? Add .fa-xs,
.fa-sm,
.fa-lg,
.fa-2x,
.fa-3x,
.fa-5x,
.fa-7x
or .fa-10x for additional sizes.
<span class="fas fa-image fa-xs mr-2"></span>
<span class="fas fa-image fa-sm mr-2"></span>
<span class="fas fa-image mr-2"></span>
<span class="fas fa-image fa-lg mr-2"></span>
<span class="fas fa-image fa-2x mr-2"></span>
<span class="fas fa-image fa-3x mr-2"></span>
<span class="fas fa-image fa-5x mr-2"></span>
<span class="fas fa-image fa-7x mr-2"></span>
<span class="fas fa-image fa-10x mr-2"></span>