How to add icons in project using Bootstrap ?
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: Example 1: This example illustrates the Globe Icon. Output: Example 2: This example illustrates the Search Icon. Output: Example 3: This example illustrates the Alarm Icon. Output: Example 4: This example illustrates the Cart Icon. Output: Reference: https://icons.getbootstrap.com/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>
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>
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>
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>
.png)