Font Aweosme
Over 1,500 free icons.
Official documentation
For more detailed information and examples, see the official documentation: Font Awesome documentation.
How to use?
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.css">
Set variable $font-icons
$font-icons: "Font Awesome 5";
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.
<i class="fa fa-user"></i>
There are 4 styles: Solid, Regular, Light and Brands:
Style | Availability | Style Prefix | Example | Rendering |
---|---|---|---|---|
Solid | Free | fas |
<i class="fas fa-image"></i> |
|
Regular | Free | far |
<i class="far fa-image"></i> |
|
Light | Pro Required | fal |
<i class="fal fa-image"></i> |
N/A |
Brands | Free | fab |
<i class="fab fa-font-awesome"></i> |
|
Duotone | Pro Required | fad |
<i class="fad fa-camera"></i> |
N/A |
Examples
<i class="fab fa-android text-primary"></i>
<i class="fas fa-car text-secondary"></i>
<i class="fas fa-user text-success"></i>
<i class="far fa-clock text-danger"></i>
<i class="fas fa-home text-info text-warning"></i>
<i class="fas fa-flag text-dark"></i>
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.
<i class="fas fa-image fa-xs"></i>
<i class="fas fa-image fa-sm"></i>
<i class="fas fa-image"></i>
<i class="fas fa-image fa-lg"></i>
<i class="fas fa-image fa-2x"></i>
<i class="fas fa-image fa-3x"></i>
<i class="fas fa-image fa-5x"></i>
<i class="fas fa-image fa-7x"></i>
<i class="fas fa-image fa-10x"></i>