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.
- 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">
- 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>
- 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>
- 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>
- 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>
- 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.