Bootstrap Icons

The bootstrap 4 has not included any icons library like bootstrap 3 glyphicons but there are multiple free icon libraries such as Font Awesome, Google material design icons, etc. are available to choose from.

 

Generally, the font icons are the symbols that are useful to represent some action on the web page and the font icons can be customized by using CSS like changing the color, size, etc. based on our requirements.

 

In case, if you want to use Font Awesome icons in your application, you need to add the following font awesome CSS file in our application header (<head>) section.

 

<link rel="Stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Once you add the above URL reference in your web page header section, you can start using font awesome icons without any downloads.

 

You can use font awesome icons with <i> or <span> tag along with CSS prefix fa with icons name like as shown following.

 

Live Preview

<i class="fa fa-desktop"></i>

<i class="fa fa-diamond"></i>

<i class="fa fa-key"></i>

<button type="button" class="btn btn-primary">

    <span class="fa fa-home"></span> Home

</button>

<button type="button" class="btn btn-secondary">

    <span class="fa fa-search"></span> Search

</button>

The above example will return the result like as shown below.

 

Bootstrap font awesome icons example result

 

To know more about using Font Awesome icons, Google material design icons and bootstrap 3 glyphicons visit Font Icons Tutorial

Topics Covered