How to use Bootstrap Icons?

Bootstrap Icons is a free icon library that’s included in the Bootstrap framework. It has over 1,300 customizable SVG icons that are available in different sizes and styles. These icons are designed to work seamlessly with Bootstrap’s other components, making it easy to add them to your web application.

Using Bootstrap Icons is simple and there are a few different ways to do it. Here are the steps to follow:

1. Include Bootstrap’s CSS and JS files in your HTML document. You can do this by adding the following code to your document’s head section:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Find the icon you want to use in Bootstrap’s documentation. Bootstrap icons are listed on the “Icons” page of the documentation. You can browse through the icons or use the search bar to find a specific one.

3. Copy the HTML code for the icon. Each icon has a unique HTML code that you can copy and paste into your own HTML document.

4. Paste the HTML code where you want the icon to appear in your document. You can use the icon code anywhere in your HTML document, such as in a button or on a navigation bar.

5. Here’s an example of what the HTML code for a Bootstrap icon might look like:

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

In this example, the “bi” class refers to Bootstrap icons, and the “bi-person” class refers to the specific icon (in this case, a person icon).

And that’s it! With just a few simple steps, you can easily add Bootstrap icons to your website or application. You can customize the icon’s colour, size, and other properties by modifying the code.