安裝和使用Bootstrap Icons有三種方法：1. 使用CDN，在HTML的head中添加鏈接即可；2. 通過npm安裝，適用於React、Vue等現(xiàn)代項(xiàng)目，需運(yùn)行npm install bootstrap-icons並導(dǎo)入CSS；3. 手動(dòng)下載SVG或字體文件並引入。使用時(shí)可通過i標(biāo)籤加bi和圖標(biāo)名稱類（如bi-heart）插入圖標(biāo)，也可用span等其他內(nèi)聯(lián)元素，推薦使用SVG文件以獲得更好的性能和自定義能力?？赏ㄟ^bi-lg、bi-2x等類調(diào)整大小，用text-danger等Bootstrap文本類或自定義CSS修改顏色。最佳實(shí)踐包括：核對(duì)官方圖標(biāo)名稱、為裝飾性圖標(biāo)添加aria-hidden="true"、對(duì)有語義的圖標(biāo)添加ARIA標(biāo)籤或sr-only文本，整體輕量且無需Bootstrap框架支持，適用於任何項(xiàng)目。

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 (depending 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.

以上是如何安裝和使用Bootstrap圖標(biāo)庫？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！