Bootstrap Icons

Last Updated : 14 Feb, 2024

Bootstrap Icons is an open-source Bootstrap library that is free and consists of over 2000 high-quality icons. You can include or use them in your HTML document to enhance the UI of your web page by using SVG, SVG sprites, or web fonts.

How to use Bootstrap icons in your project?

There are two ways of using Bootstrap icons in your project as listed below:

Using Node Package Manager(NPM):

You can install Bootstrap icons in your current project directory using the below npm command.

npm install bootstrap-icons

Using the CDN Link:

You can also use the Bootstrap icons CSS CDN link in your HTML document to include Bootstrap icons in your project. The CDN link is given below.

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

Example: The below code will explain how you can use the CDN link to include Bootstrap icons in your project.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>AppendChild Example</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        #container {
            text-align: center;
        }
 
        button {
            background-color: green;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h3>Hey Geek,</h3>
        <h2 style="color: green;">
            Welcome to GeeksforGeeks!!
        </h2>
        <h4>
            <i class="bi bi-pc-display-horizontal"></i>
            A Computer science portal.
            <i class="bi bi-laptop-fill"></i>
        </h4>
        <a target="_blank" href=
"https://www.geeksforgeeks.org/courses?source=google&medium=cpc&device=c&keyword=gfg%20courses&matchtype=e&campaignid=20039445781&adgroup=147845288105&gad_source=1&gclid=EAIaIQobChMI2bj-v5SohAMVtQ2DAx0IfA7mEAAYASAAEgIF9vD_BwE">
            <button id="btn">
                Buy GFG Course
                <i class="bi bi-bag-fill"></i>   
            </button>         
        </a>
        <p>
            <b>
                Fuel Your knowledge with GFG
                <i class="bi bi-fuel-pump-fill"></i>
            </b>
        </p>
    </div>
</body>
 
</html>