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.
<!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.
<!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.
<!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.
<!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/