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.

Example

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

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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>

<body>

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

    </div>

</body>

</html>

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 👍