how to use bootstrap icon

How to Use Bootstrap Icons

Bootstrap Icons is a free icon set provided by Bootstrap that can be used to enhance the visual appeal of your website. This post will guide you on how to use Bootstrap Icons effectively.

  1. Installing Bootstrap Icons

First, you need to install Bootstrap Icons in your project. You can either download the icons from the Bootstrap website or add the following link in the <head> section of your HTML file:

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

  1. Adding Icons

To add an icon, use the <i> element with the class bi and the specific icon class. Here’s an example of adding the “heart” icon:

html
<i class="bi bi-heart"></i>

  1. Sizing Icons

Bootstrap Icons can be easily sized as per your requirements. You can use the fs-1, fs-2, fs-3, fs-4, fs-5, fs-6, or fs-7 classes to increase or decrease the icon size. For example:

html
<i class="bi bi-heart fs-2"></i>

  1. Changing Icon Color

To change the color of an icon, you can use the Bootstrap color classes. Simply add the desired color class to the parent element of the icon. For instance:

html
<span class="text-primary">
<i class="bi bi-heart"></i>
</span>

  1. Using Icon in Buttons

Bootstrap Icons can also be used within buttons. Simply add the icon element in the <button> tag. Here’s an example of using the “heart” icon in a button:

html
<button class="btn btn-primary">
<i class="bi bi-heart"></i> Like
</button>

  1. Adding Tooltip to Icons

You can add a tooltip to an icon by using the Bootstrap tooltip component. Add the data-bs-toggle="tooltip" and data-bs-original-title attributes to the icon element. For example:

html
<i class="bi bi-heart" data-bs-toggle="tooltip" data-bs-original-title="Like"></i>

Don’t forget to initialize the tooltip using JavaScript if you’re using Bootstrap 5:

“`html

“`

That’s it! You now know how to effectively use Bootstrap Icons in your project.

Remember to refer to the Bootstrap Icons documentation for more icon classes and customization options.