There are three ways to install and use Bootstrap Icons: 1. Use CDN and add links to the head of HTML; 2. Install through npm, suitable for modern projects such as React and Vue. You need to run npm install bootstrap-icons and import CSS; 3. Manually download SVG or font files and import them. When using it, you can add bi and icon name classes (such as bi-heart) to insert icons. You can also use other inline elements such as span. It is recommended to use SVG files for better performance and customization capabilities. You can adjust the size through bi-lg, bi-2x and other classes, and use Bootstrap text classes such as text-danger or custom CSS to modify the color. Best practices include: checking the official icon name, adding aria-hidden="true" to decorative icons, adding ARIA tags or sr-only text to semantic icons, which are lightweight and do not require Bootstrap framework support, and are suitable for any project.

Installing and using Bootstrap Icons is simple and flexible — you can add them via CDN, npm, or download the files directly. Here's how to get started and use them in your project.

? 1. Install Bootstrap Icons (Choose One Method)

You don't need the full Bootstrap framework to use Bootstrap Icons. Here are the most common ways to include them:

Option A: Use CDN (Fastest for basic use)

Add this <link> tag inside the of your HTML file:

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

? Best for quick prototypes or simple websites. No setup needed.

Option B: Install via npm (For modern web projects)

Run this command in your project directory:

 npm install bootstrap-icons

Then, import the CSS in your main stylesheet or JS entry file (dependent on your build setup):

 @import "bootstrap-icons/font/bootstrap-icons.css";

? Best for React, Vue, or webpack-based apps.

Option C: Download SVGs or Fonts (Manual control)

Go to http://ipnx.cn/link/adad0f2b196a1ed3e3b9d9025c397132 , click "Download" or go to the GitHub repo ( http://ipnx.cn/link/16b872fc557900838e19f750151167e4 ) and download the icon files.

You can use individual SVGs or include the entire font set manually.

? 2. How to Use Bootstrap Icons

Once installed, you can use icons in several ways.

Method 1: Using the <i> tag (Recommended for icons)

Bootstrap Icons use the bi class as base, followed by bi-icon-name .

 <i class="bi bi-heart"></i>
<i class="bi bi-arrow-right"></i>
<i class="bi bi-house-fill"></i>

Make sure to use the correct icon name from the official docs: http://ipnx.cn/link/adad0f2b196a1ed3e3b9d9025c397132

Method 2: With other elements

You can apply the classes to any inline element:

 <span class="bi bi-search"></span>

Useful when <i> doesn't fit semantic HTML standards.

Method 3: Use individual SVG files (Best for performance & customization)

If you downloaded or imported SVGs, you can use them directly:

 <svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#heart"/>
</svg>

This method is great for bundling and changing color/size via CSS.

? 3. Customizing Icons (Size, Color, etc.)

Change size using built-in classes:

 <i class="bi bi-star"></i> <!-- Default -->
<i class="bi bi-star bi-lg"></i> <!-- Larger -->
<i class="bi bi-star bi-2x"></i> <!-- 2x size -->
<i class="bi bi-star bi-3x"></i> <!-- 3x size -->

Change color with text utilities (if using Bootstrap CSS):

 <i class="bi bi-bell text-danger"></i>
<i class="bi bi-bell text-success"></i>

Or with custom CSS:

 .bi {
  color: #0d6efd;
  font-size: 2rem;
}

? 4. Tips & Best Practices

• Always check the official icon library for correct names.
• Avoid using many icons via SVG sprites if you're not bundling — it can slow down load time.
• For accessibility, add aria-hidden="true" if the icon is decorative:

   <i class="bi bi-download" aria-hidden="true"></i>

• If the icon conveys meaning (eg, "delete"), use proper ARIA labels or sr-only text.

---

Basically, just include the CSS and use bi bi-[icon-name] . It's lightweight, well-documented, and works anywhere — no framework needed.

The above is the detailed content of How to install and use Bootstrap Icons library?. For more information, please follow other related articles on the PHP Chinese website!