How to use bootstrap icon

Use the Bootstrap icon library to easily add icons in web applications. The steps include: referencing the icon library, using the icon (by class name, such as), adjusting the icon size (fs-1/2/3/4), changing the icon color (text-primary/secondary, etc.), and combining classes to create icons of different styles.

How to use Bootstrap icon in your project

Bootstrap provides a library of icons that can easily add icons to your web applications.

Steps to use:

1. Quoting Bootstrap icon library

In your HTML document, refer to the Bootstrap icon library within the tag:

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

2. Use icons

The Bootstrap icon is referenced using the class name. To use icons, use the following syntax in your HTML:

 <code class="html"><i class="bi-icon-name"></i></code>

For example, to use the "house" icon, use:

 <code class="html"><i class="bi-house"></i></code>

3. Icon Size

You can resize the icon by adding the "fs-" class. Available sizes include:

• fs-1 (24px)
• fs-2 (16px)
• fs-3 (12px)
• fs-4 (10px)

For example, to set the House icon to medium size, use:

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

4. color

You can use the "text-" class to change the color of the icon. Available colors include:

• text-primary
• text-secondary
• text-success
• text-danger
• text-warning
• text-info
• text-dark

For example, to set the House icon to blue, use:

 <code class="html"><i class="bi-house text-primary"></i></code>

5. combination

You can combine these classes to create icons of various styles. For example, to create a medium-sized green "house" icon, use:

 <code class="html"><i class="bi-house fs-2 text-success"></i></code>

The above is the detailed content of How to use bootstrap icon. For more information, please follow other related articles on the PHP Chinese website!