Introduction

This tutorial aims to guide you in customizing the size and color of Bootstrap Icons using CSS. Bootstrap icons are SVGs, so they can be styled with CSS, including size and color. By the end of this tutorial, you will be able to alter these properties to better match your website's design and aesthetics.

No prior knowledge is required, but a basic understanding of HTML, CSS, and Bootstrap could be beneficial.

Step-by-Step Guide

• Size: Bootstrap icons' size can be adjusted using CSS properties like width and height. Using the font-size property will also scale the icon because they are SVGs.

• Color: The fill property is used to change the color of Bootstrap icons. Setting this property will change the icon color.

• Best Practices: Always aim for consistency in your website's design. When changing icon sizes and colors, ensure that they align with your site's overall aesthetic.

Code Examples

Here's an example of how you can customize your Bootstrap icons:

HTML:

<i class="bi bi-alarm-fill"></i>

CSS:

.bi-alarm-fill {
   width: 50px;
   height: 50px;
   fill: red;
}

In this example, we first select the icon using its class, then we set width and height to 50px and fill to red. This will make the icon larger and change its color to red.

Summary

In this tutorial, we've learned how to customize the size and color of Bootstrap Icons using CSS. You now know how to use the width, height, and fill properties to alter the size and color of these icons.

The next step would be to learn more about CSS and Bootstrap, such as how to use Bootstrap's built-in classes to further style your website. You can refer to the official Bootstrap documentation for more information.

Practice Exercises

1. Exercise 1: Customize the size of the bi-check icon to 40px by 40px and change its color to green.

   • Solution:
     css .bi-check { width: 40px; height: 40px; fill: green; }
     This solution selects the bi-check icon and sets the width and height to 40px and fill to green.

2. Exercise 2: Increase the size of the bi-x-circle-fill icon to 60px by 60px and change its color to red.

   • Solution:
     css .bi-x-circle-fill { width: 60px; height: 60px; fill: red; }
     This solution selects the bi-x-circle-fill icon and sets the width and height to 60px and fill to red.

For more practice, try to customize different Bootstrap icons and play around with the width, height, and fill properties.