Bootstrap Icons

Bootstrap 4 has not included any icons library like bootstrap 3 glyphicons. Still, 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 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 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