How to include bootstrap icons?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, We will learn how to include and use Bootstrap icons on a web page.

Integrated bootstrap

Step 1:

To implement our bootstrap HTML file.

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Step 2: Bootstrap icon

Here we will click to open the icon in Bootstrap.

Bootstrap Icon,

Step 3:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 4:

<h1><i class="bi-globe"></i> Globe</h1>
    <h1><i class="bi-bank2"></i> Bank2</h1>
    <h1><i class="bi-binoculars-fill"></i> Binoculars-fill</h1>
    <h1><i class="bi-calendar-fill"></i> Calendar-fill</h1>

Add the icon class name to any inline HTML element (such as <i> or <span>).

Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project.

Use Bootstrap Icons in Your Code

To use Bootstrap icons in your code you’ll require an <i> tag with an individual icon class .bi-* applied on it. The general syntax for using Bootstrap icons is:

<i class="bi-class-name"></i>

Example

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
    <h1><i class="bi-globe"></i> Globe</h1>
    <h1><i class="bi-bank2"></i> Bank2</h1>
    <h1><i class="bi-binoculars-fill"></i> Binoculars-fill</h1>
    <h1><i class="bi-calendar-fill"></i> Calendar-fill</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In the above code, we have used .bi-* class to use icons in bootstrap

Check the output of the above code example.

Bootstrap, Bootstrap, Icons

Similarly, you can place Font Awesome icons inside the navs, forms, tables, paragraphs, and other components in the same way as you do with Bootstrap icons.

All the best 👍