Open In App

How to add icons in project using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. An icon is a visual representation that helps to understand the website & also helps to navigate through the website. In order words, an icon is a cue the specifies the particular task for which the icon is used, is to be performed. The Bootstrap icons decorate the webpage/website in a standard format that gives a nice look. A bootstrap icon library contains over 1300 icons with a high-quality design & free to use. In order to use such icons, we will use the Bootstrap CDN link to include it in the HTML document. 

Syntax:

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

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”/>

Bootstrap Font Icon CSS link:

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css” />

Approach:

  • Go to the official site of Bootstrap & copy the Bootstrap CDN for CSS, JS, Popper.js, and jQuery links.
  • Add the CDN  link along with add font icon link inside the <head> tag
  • Add the class with bi bi-icon_name followed by the name of the icon.

Example 1: This example illustrates the Globe Icon.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <title>Bootstrap Icons in HTML</title>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
 
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href=
</head>
 
<body>
    <center>
        <h1 style="color: green">
            Geeks For Geeks
        </h1>
         
        <h1 class="m-4">Globe Icon:
            <i class="bi-globe"></i>
        </h1>
    </center>
</body>
 
</html>


Output:

Example 2: This example illustrates the Search Icon.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
         
    <title>Bootstrap Icons in HTML</title>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
 
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href=
</head>
 
<body>
    <center>
        <h1 style="color: green">
            Geeks For Geeks
        </h1>
         
        <h1 class="m-4">Search Icon:
            <i class="bi-search"></i>
        </h1>
    </center>
</body>
 
</html>


Output:

Example 3: This example illustrates the Alarm Icon.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <title>Bootstrap Icons in HTML</title>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
 
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href=
</head>
 
<body style="margin-top: 45px">
    <center>
        <h1 style="color: green">
            Geeks For Geeks
        </h1>
         
        <h1 class="m-4">Alarm Icon:
            <i class="bi-alarm"></i>
        </h1>
    </center>
</body>
 
</html>


Output:

Example 4: This example illustrates the Cart Icon.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <title>Bootstrap Icons in HTML</title>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
 
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href=
</head>
 
<body>
    <center>
        <h1 style="color: green">
            Geeks For Geeks
        </h1>
         
        <h1 class="m-4">Cart Icon:
            <i class="bi-cart"></i>
        </h1>
    </center>
</body>
 
</html>


Output:

Reference: https://icons.getbootstrap.com/



Last Updated : 14 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads