How to use bootstrap icon library

The Bootstrap icon library provides a range of beautiful and concise icons that can be easily added to your project. Steps include: Install Bootstrap to add a CDN or include it in HTML Use Icons() to customize the icon size and color (using the CSS class)

How to use Bootstrap icon library in a project

The Bootstrap Icon Library is a simple and beautiful collection of large collections of icons that can be added to Bootstrap projects. Here's how to use it:

Step 1: Install Bootstrap

Install Bootstrap in the following ways:

 <code class="bash">npm install bootstrap</code>

Step 2: Add a CDN or include it in your HTML

In your HTML file, include the Bootstrap icon library CDN:

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

Or, include it in your HTML file:

 <code class="html"><link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css"></code>

Step 3: Use the icon

In your HTML, add icons using the following syntax:

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

For example, to add a house icon, use:

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

Customize icon size and color

You can use the CSS class to customize the size and color of the icon:

size:

• bi-1x : small
• bi-2x : medium size
• bi-3x : Large size
• bi-4x : Extra large size

color:

• bi-primary : blue
• bi-secondary : grey
• bi-success : green
• bi-danger : red
• bi-warning : yellow
• bi-info : blue

For example, to add a large blue house icon, use:

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

hint:

• Make sure you use the correct icon name. A complete list of icons can be found on the official Bootstrap website.
• You can override the default icon style in your custom CSS.
• There are other useful utility classes in the icon library, such as bi-border-rounded and bi-flip-horizontal .

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