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>


                        <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>


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>


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!.


                        <i class="ti-android text-primary"></i>
                        <i class="ti-car text-secondary"></i>
                        <i class="ti-chart-pie text-success"></i>
                        <i class="ti-timer text-danger"></i>
                        <i class="ti-comment-alt text-info text-warning"></i>
                        <i class="ti-flag text-danger"></i>