How to add icons in project using Bootstrap ?

14 Feb, 2022
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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />     <!-- Bootstrap Font Icon CSS -->    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /></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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />     <!-- Bootstrap Font Icon CSS -->    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /></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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />     <!-- Bootstrap Font Icon CSS -->    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /></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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />     <!-- Bootstrap Font Icon CSS -->    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /></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/
rkbhola5
Bootstrap-4
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?