Sign in


Sign up


Bootstrap icons

Bootstrap icons usage is a quick tutorial which describes the proper way of using Font Awesome icons in Bootstrap framework.

MDB uses a powerful set of icons called Font Awesome.

One Font, 628 Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Free, as in Speech

Font Awesome is completely free for commercial use.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Perfect on Retina Displays

Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Accessibility-minded

Font Awesome loves screen readers and helps make your icons accessible on the web.

Basic usage

Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).


 <i class="fa fa-camera-retro"></i> fa-camera-retro
                    
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same thing goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger icons

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.


<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Colors

amber-text

red-text

indigo-text

cyan-text

green-text

To see all colors options, go to colors list.


<i class="fa fa-bolt fa-3x amber-text" aria-hidden="true"></i> amber-text
<i class="fa fa-bug fa-3x red-text" aria-hidden="true"></i> red-text
<i class="fa fa-heart fa-3x indigo-text" aria-hidden="true"></i> indigo-text
<i class="fa fa-bell fa-3x cyan-text" aria-hidden="true"></i> cyan-text
<i class="fa fa-birthday-cake fa-3x green-text" aria-hidden="true"></i> pink-text

Margins

ml-3

mr-3

mx-4

my-4

m-5

You can add spacing to your icons from the top, bottom, right, left or all sides. Look at here to see all possibilities.


<i class="fa fa-gift fa-2x pink-text ml-3" aria-hidden="true"></i> ml-3
<i class="fa fa-gift fa-2x pink-text mr-3" aria-hidden="true"></i> mr-3
<i class="fa fa-gift fa-2x pink-text mx-4" aria-hidden="true"></i> mx-4
<i class="fa fa-gift fa-2x pink-text my-4" aria-hidden="true"></i> my-4
<i class="fa fa-gift fa-2x pink-text m-5" aria-hidden="true"></i> m-5

Buttons

It's good to improve the appearance of your buttons with icons. Look at here to see the other buttons options.


<a class="btn-floating btn-lg purple-gradient"><i class="fa fa-bolt"></i></a>
<button type="button" class="btn btn-info btn-rounded btn-lg">Button<i class="fa fa-heart ml-2" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-default btn-rounded waves-effect"><i class="fa fa-diamond mr-2" aria-hidden="true"></i>Button</button>
<button type="button" class="btn btn-indigo btn-md">Button<i class="fa fa-thumbs-up ml-2" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-warning waves-effect btn-sm"><i class="fa fa-user mr-2" aria-hidden="true"></i>Button</button>

Features

Icons are very useful when you want to show the features of something. Look at here to see more our features sections.

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


<!--Section: Features v.4-->
<section>
        
    <!--Section heading-->
    <h1 class="py-5 font-weight-bold text-center">Why is it so great?</h1>
    <!--Section description-->
    <p class="px-5 mb-5 pb-3 lead grey-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam.</p>

    <!--Grid row-->
    <div class="row">

    <!--Grid column-->
    <div class="col-md-4">

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-flag-checkered deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">International</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-flask deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Experimental</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-glass deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Relaxing</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-4 mb-2 center-on-small-only flex-center">
        <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-4">

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-heart deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Beloved</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-flash deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Rapid</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-magic deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Magical</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

    </div>
    <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--/Section: Features v.4-->

Full list of icons

To see the full list of available icons click the button below

Icons list