Icons
Guidance and suggestions for using icon libraries with Bootstrap.
Font Awesome
Over 1,500 free icons
Awesome includes the world's most popular and easiest to use icon set - Font Awesome.
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.
<i class="fas fa-image"></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> |
Examples
<i class="fab fa-android text-primary"></i>
<i class="fas fa-car text-secondary"></i>
<i class="fas fa-chart-pie text-success"></i>
<i class="far fa-clock text-danger"></i>
<i class="fas fa-comment-alt 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>
Themify
320+ pixel-perfect, hand-crafted icons
Themify Icons is a complete set of icons for use in web design and apps - available to the public, 100% FREE!.