How to use glyphicons in bootstrap 4?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use glyphicons in bootstrap 4 with code example.

Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.

The way to insert icons is also the same as for glyphicons with an <i> code. It is simply the easiest way to insert icons as you just need to know the icon class from the huge list on their site and it’s done in seconds.


Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">

    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">


    <div class="container">
        <h2>Glyphicon Examples</h2>
        <div class="container">
            <i class="fas fa-cloud"></i>
            <i class="fas fa-coffee"></i>
            <i class="fas fa-car"></i>
            <i class="fas fa-file"></i>
            <i class="fas fa-bars"></i>




In the above code, we have used .fas fa-bars class to use glyphicons in bootstrap

Check the output of the above code example.

Bootstrap, Glyphicon

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts