Icons

1. Course Introduction

(1) Prerequisites

Basic usage of Bootstrap components (Lesson 16 - Accordion)
HTML inline elements and the class attribute
CSS color and font size control

(2) 🎯 What You Will Learn

Introduce the Bootstrap Icons library via CDN
Use bi-* classes to embed icons in a page
Control icon size and color with fs-* and text-* utilities
Integrate icons into components like buttons, navbars, and cards
Implement more flexible icon rendering using the SVG method

(3) Pain Points

Charlie's product management page needs icons added to buttons and navigation to improve readability—a pencil icon for the edit button, a trash icon for the delete button, and a search icon for the navbar. With Bootstrap Icons, this can be done in just a few lines of code.

(4) Solution

Icons are important visual elements in an interface. Bootstrap Icons is an official open-source SVG icon library from Bootstrap, containing over 2000 icons that work perfectly with Bootstrap components.

(5) Benefits

Adding icons is just a few lines of code with Bootstrap Icons. All icons integrate seamlessly with Bootstrap components, with unified and controllable colors and sizes, significantly improving interface readability.

2. Introducing Bootstrap Icons

▶ Example: Basic Icon Demo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Icons Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Icons</h5>
    <i class="bi bi-house"></i> Home
    <i class="bi bi-gear"></i> Settings
    <i class="bi bi-person"></i> Profile
    <i class="bi bi-envelope"></i> Messages
    <i class="bi bi-bell"></i> Notifications

    <hr>

    <h5>Icons with Colors</h5>
    <i class="bi bi-heart-fill text-danger fs-3"></i>
    <i class="bi bi-star-fill text-warning fs-3"></i>
    <i class="bi bi-check-circle-fill text-success fs-3"></i>
    <i class="bi bi-info-circle-fill text-primary fs-3"></i>

    <hr>

    <h5>Icons in Buttons</h5>
    <button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
    <button class="btn btn-success"><i class="bi bi-pencil"></i> Edit</button>
    <button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
    <button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>

    <hr>

    <h5>Icon Sizes</h5>
    <i class="bi bi-circle fs-6"></i> fs-6
    <i class="bi bi-circle fs-4"></i> fs-4
    <i class="bi bi-circle fs-2"></i> fs-2
    <i class="bi bi-circle fs-1"></i> fs-1
  </div>
</body>
</html>

▶ Try it Yourself

(1) Basic Classes

HTML

<i class="bi bi-{name}"></i>

▶ Try it Yourself

Icon Syntax	Rendered Effect	Description
`<i class="bi bi-alarm"></i>`	🔔	Alarm clock icon
`<i class="bi bi-calendar"></i>`	📅	Calendar icon
`<i class="bi bi-camera"></i>`	📷	Camera icon
`<i class="bi bi-heart-fill"></i>`	❤️	Filled heart (`-fill` filled version)
`<i class="bi bi-star"></i>`	⭐	Outline star (outline version)

-fill suffix: Most icons provide a -fill filled version. bi-heart is the outline, bi-heart-fill is the filled version.

(2) Common Icon Categories

Category	Icons	Scenarios
Navigation	`bi-house` / `bi-gear` / `bi-person`	Navigation menus
Actions	`bi-plus` / `bi-pencil` / `bi-trash` / `bi-download`	Buttons
Status	`bi-check-circle` / `bi-exclamation-triangle` / `bi-info-circle`	Feedback
Social	`bi-twitter-x` / `bi-github` / `bi-linkedin`	Social links
Arrows	`bi-chevron-right` / `bi-arrow-left` / `bi-caret-down`	Navigation/Carousel
Media	`bi-play-fill` / `bi-pause-fill` / `bi-volume-up`	Players

3. Icon Usage Methods

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Media Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Social Media Links</h5>
    <div class="d-flex gap-3 fs-3">
      <a href="#" class="text-primary"><i class="bi bi-facebook"></i></a>
      <a href="#" class="text-info"><i class="bi bi-twitter-x"></i></a>
      <a href="#" class="text-danger"><i class="bi bi-instagram"></i></a>
      <a href="#" class="text-success"><i class="bi bi-whatsapp"></i></a>
      <a href="#" class="text-secondary"><i class="bi bi-github"></i></a>
      <a href="#" class="text-primary"><i class="bi bi-linkedin"></i></a>
      <a href="#" class="text-danger"><i class="bi bi-youtube"></i></a>
    </div>

    <hr>

    <h5>With Labels</h5>
    <div class="d-flex gap-4">
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-facebook d-block fs-2 text-primary"></i>
        <small>Facebook</small>
      </a>
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-twitter-x d-block fs-2 text-dark"></i>
        <small>Twitter</small>
      </a>
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-instagram d-block fs-2 text-danger"></i>
        <small>Instagram</small>
      </a>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Icon and Button Combinations

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Button Combinations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Button with Icon Left</h5>
    <button class="btn btn-primary"><i class="bi bi-download me-1"></i> Download</button>
    <button class="btn btn-success"><i class="bi bi-check-lg me-1"></i> Save</button>
    <button class="btn btn-danger"><i class="bi bi-trash me-1"></i> Delete</button>

    <h5 class="mt-3">Icon Only Button</h5>
    <button class="btn btn-outline-primary" aria-label="Search"><i class="bi bi-search"></i></button>
    <button class="btn btn-outline-secondary" aria-label="Notifications"><i class="bi bi-bell"></i></button>
    <button class="btn btn-outline-info" aria-label="Settings"><i class="bi bi-gear"></i></button>

    <h5 class="mt-3">Button Group with Icons</h5>
    <div class="btn-group" role="group">
      <button class="btn btn-outline-primary"><i class="bi bi-justify-left"></i></button>
      <button class="btn btn-outline-primary"><i class="bi bi-justify"></i></button>
      <button class="btn btn-outline-primary"><i class="bi bi-justify-right"></i></button>
    </div>

    <h5 class="mt-3">Icon + Badge Button</h5>
    <button class="btn btn-primary position-relative">
      <i class="bi bi-cart"></i> Cart
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
    </button>
  </div>
</body>
</html>

▶ Try it Yourself

4. Icon Size Control

▶ Example: Custom Color Icon List

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Color Icon List</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    .icon-list { list-style: none; padding: 0; }
    .icon-list li { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
    .icon-list .bi { font-size: 1.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h5>Feature List with Custom Colors</h5>
    <ul class="icon-list">
      <li><i class="bi bi-shield-check text-success"></i> <span><strong>Security</strong> — 256-bit encryption</span></li>
      <li><i class="bi bi-lightning-charge text-warning"></i> <span><strong>Speed</strong> — CDN optimized delivery</span></li>
      <li><i class="bi bi-cloud-check text-info"></i> <span><strong>Backup</strong> — Automatic daily backup</span></li>
      <li><i class="bi bi-headset text-primary"></i> <span><strong>Support</strong> — 24/7 customer service</span></li>
      <li><i class="bi bi-graph-up-arrow text-danger"></i> <span><strong>Analytics</strong> — Real-time dashboard</span></li>
    </ul>

    <hr>

    <h5>Gradient Icons (Custom CSS)</h5>
    <div class="d-flex gap-3 fs-1">
      <i class="bi bi-heart-fill" style="color: #ff6b6b;"></i>
      <i class="bi bi-star-fill" style="color: #feca57;"></i>
      <i class="bi bi-moon-fill" style="color: #48dbfb;"></i>
      <i class="bi bi-sun-fill" style="color: #ff9ff3;"></i>
      <i class="bi bi-flower1" style="color: #54a0ff;"></i>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Class	CSS Value	Actual Size	Applicable Scenarios
`fs-6`	`font-size: 1rem`	16px	Inline text icons
`fs-5`	`font-size: 1.25rem`	20px	List item icons
`fs-4`	`font-size: 1.5rem`	24px	Button icons
`fs-3`	`font-size: 1.75rem`	28px	Navbar icons
`fs-2`	`font-size: 2rem`	32px	Card title icons
`fs-1`	`font-size: 2.5rem`	40px	Hero/Large icons
Custom	`style="font-size: 3rem"`	48px+	Special emphasis scenarios

(1) Icon and Text Combination Patterns

Pattern	Structure	Example
Icon before	`<i class="bi bi-* me-2"></i>Text`	`<i class="bi bi-house me-2"></i>Home`
Icon after	`Text<i class="bi bi-* ms-2"></i>`	`More<i class="bi bi-arrow-right ms-2"></i>`
Icon above	`<i class="bi bi-* d-block"></i><span>Text</span>`	Social media icons
Icon replaces text	`<button aria-label="Search"><i class="bi bi-search"></i></button>`	Icon-only button
Icon + Badge	`<i class="bi bi-* position-relative"><span class="badge">N</span></i>`	Notification count

5. Icon Application in Components

HTML

<!-- Icon in a button -->
<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
<button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
<button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>

<!-- Icon in the navbar -->
<nav class="nav">
  <a class="nav-link" href="#"><i class="bi bi-house me-1"></i>Home</a>
  <a class="nav-link" href="#"><i class="bi bi-box me-1"></i>Products</a>
  <a class="nav-link" href="#"><i class="bi bi-envelope me-1"></i>Messages</a>
</nav>

<!-- Icon in an alert -->
<div class="alert alert-success d-flex align-items-center">
  <i class="bi bi-check-circle-fill me-2"></i>
  Operation completed successfully.
</div>

<div class="alert alert-danger d-flex align-items-center">
  <i class="bi bi-exclamation-triangle-fill me-2"></i>
  An error occurred. Please try again.
</div>

<!-- Icon in a card -->
<div class="card text-center p-4">
  <i class="bi bi-cloud-upload fs-1 text-primary"></i>
  <h5 class="mt-2">Upload File</h5>
  <p class="text-body-secondary">Drag and drop file here</p>
</div>

<!-- Icon in a list group -->
<ul class="list-group">
  <li class="list-group-item"><i class="bi bi-house me-2"></i>Dashboard</li>
  <li class="list-group-item"><i class="bi bi-box me-2"></i>Products</li>
  <li class="list-group-item"><i class="bi bi-people me-2"></i>Users</li>
  <li class="list-group-item"><i class="bi bi-graph-up me-2"></i>Reports</li>
</ul>

▶ Try it Yourself

6. SVG Method

Besides using Bootstrap Icons via CSS classes, you can also directly use SVG <use> tags to reference the sprite file.

HTML

<!-- Class method -->
<i class="bi bi-house"></i>

<!-- SVG method -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#house"/>
</svg>

<!-- SVG + custom color -->
<svg class="bi text-success" width="32" height="32" fill="currentColor">
  <use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#check-circle"/>
</svg>

▶ Try it Yourself

Comparison Item	Class Method (`<i>`)	SVG Method (`<svg>`)
Syntax	`<i class="bi bi-*"></i>`	`<svg><use href="...#name"/></svg>`
Loading method	CDN CSS file	Remote sprite SVG file
Multi-color support	Single color (inherits currentColor)	Supports multi-color SVG
Size control	`fs-*` utility classes	`width`/`height` attributes
Color control	`text-*` utility classes	`fill` attribute or `text-*`
Applicable scenarios	Quick integration, standard scenarios	Scenarios requiring custom styles

7. Advanced Icon Applications

▶ Example: CSS Animated Icons

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    .icon-spin { animation: spin 2s linear infinite; display: inline-block; }
    .icon-pulse { animation: pulse 1.5s ease-in-out infinite; display: inline-block; }
    .icon-shake { animation: shake 0.5s ease-in-out infinite; display: inline-block; }
    .icon-bounce { animation: bounce 1s ease-in-out infinite; display: inline-block; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h5>Animated Icons</h5>
    <div class="d-flex gap-4 fs-1 mb-4">
      <div class="text-center">
        <i class="bi bi-arrow-clockwise icon-spin text-primary"></i>
        <div><small>Spin</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-bell-fill icon-shake text-warning"></i>
        <div><small>Shake</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-heart-fill icon-pulse text-danger"></i>
        <div><small>Pulse</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-chevron-down icon-bounce text-success"></i>
        <div><small>Bounce</small></div>
      </div>
    </div>

    <h5>Loading Spinner</h5>
    <div class="d-flex align-items-center gap-3">
      <i class="bi bi-arrow-clockwise icon-spin fs-3 text-primary"></i>
      <span>Loading...</span>
    </div>

    <h5 class="mt-3">Notification Bell</h5>
    <button class="btn btn-outline-warning"
      onmouseover="this.querySelector('i').classList.add('icon-shake')"
      onmouseout="this.querySelector('i').classList.remove('icon-shake')">
      <i class="bi bi-bell-fill"></i> Notifications
    </button>
  </div>
</body>
</html>

▶ Try it Yourself

flowchart TD
    A[Need an Icon] --> B{Usage Scenario}
    B --> C[Navigation/Buttons/Lists]
    B --> D[Social Media Links]
    B --> E[Loading/Animation Effects]
    C --> F{Quantity}
    F --> G[Few < 10]
    F --> H[Many ≥ 10]
    G --> I[Inline SVG or Class]
    H --> J[CDN CSS Import]
    D --> K[Colored Class + Link]
    E --> L[CSS keyframes Animation]
    I --> M[Use bi-* class]
    J --> M
    M --> N[Style with fs-* / text-*]

Scenario	Recommended Method	Description
Button icon	`<i class="bi bi-*"></i>`	Use `me-1`/`ms-1` to control spacing
Icon-only button	`<button aria-label="..."><i ...></i></button>`	Must add `aria-label`
Navigation link	`<a><i class="bi bi-* me-1"></i>Text</a>`	Icon + text combination
Notification badge	`<span class="position-relative"><i ...></i><span class="badge">N</span></span>`	Position badge in top-right
Loading animation	`<i class="bi bi-arrow-clockwise" style="animation: spin 2s linear infinite"></i>`	With CSS animation

Comparison Item	Bootstrap Icons	Font Awesome
Format	SVG icons (not a font)	Icon font
Number of icons	2000+	7800+ (Pro)
Price	Free and open source	Free version limited, Pro paid
Prefix	`bi bi-*`	`fas fa-` / `far fa-`
Integration with Bootstrap	Official, perfect integration	Requires additional configuration
Multi-color support	Single color (SVG supports multi-color)	Single color (font limitation)
File size	~120KB (CSS)	~300KB+ (full suite)

❓ Frequently Asked Questions

Q How to choose between Bootstrap Icons and Font Awesome?

A For Bootstrap projects, Bootstrap Icons is the first choice—official, seamless integration, smaller file size. If you are already using Font Awesome or have special icon needs (e.g., more brand icons), you can continue using Font Awesome but note the different prefixes: bi bi-* vs fas fa-*.

Q What if icons don't display?

A Troubleshooting in three steps: (1) Verify the CDN link is correct and loaded: <link rel="stylesheet" href="...bootstrap-icons.min.css">; (2) Check if the icon name is correct—bi- prefix + lowercase English name + hyphens; (3) Open the browser console and check the Network tab to confirm the CDN loaded successfully.

Q Can I load only specific icons without importing the entire CSS file?

A Yes. Use the SVG Sprite method: <use href="...bootstrap-icons.svg#name"/> to reference as needed. You can also inline a single SVG into the HTML. Additionally, you can use tools (like iconfont generators) to create custom subsets.

Q Can Bootstrap Icons and Font Awesome class names be used together?

A Syntactically, you can import both libraries, but note the different prefixes—Bootstrap Icons use bi bi-*, Font Awesome uses fas fa-*. Importing both increases load size; it's recommended to unify on one. If migrating from Font Awesome, you can use find-and-replace to batch modify class names.

Q How to ensure accessibility for icon-only buttons?

A Three solutions: (1) Add <span class="visually-hidden">Text description</span> for screen reader text; (2) Set aria-label="description" on the <i> tag; (3) Wrap with <a> or <button> and provide a tooltip from the title attribute. Solution (1) is recommended for best compatibility.

Q Can icons be overlaid or combined?

A Yes. Use position-relative + position-absolute to overlay icons. For example, place bi-dot-fill in the top-right corner of bi-envelope to indicate unread messages. You can also use CSS mask or background properties for more complex combinations.

📖 Summary

Bootstrap Icons is the official SVG icon library, imported via bootstrap-icons.css
Use the <i class="bi bi-{name}"></i> syntax; the -fill suffix is for the filled version
Icons can be sized with fs-* and colored with text-*
Common application scenarios: buttons, list groups, alerts, cards, navbars
The SVG method (<use>) provides more flexible rendering control, supporting multi-color and custom styles

📝 Assignments

⭐ Create a navbar with an icon added before each of 5 links: Home (house), Products (box), About (info-circle), Blog (file-text), Contact (envelope).
⭐⭐ Create a button group: Search (search), Add (plus-lg), Edit (pencil), Delete (trash), Download (download)—each button with a corresponding icon and text.
⭐⭐⭐ Modify a previous Alert example to include icons: Success uses bi-check-circle-fill, Danger uses bi-exclamation-triangle-fill, Info uses bi-info-circle-fill, and add a fade-in animation effect.

Previous Lesson: Accordion · Next Lesson: Utilities

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Icons

1. Course Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Points

(4) Solution

(5) Benefits

2. Introducing Bootstrap Icons

▶ Example: Basic Icon Demo

(1) Basic Classes

(2) Common Icon Categories

3. Icon Usage Methods

▶ Example: Social Media Icon Links

▶ Example: Icon and Button Combinations

4. Icon Size Control

▶ Example: Custom Color Icon List

(1) Icon and Text Combination Patterns

5. Icon Application in Components

6. SVG Method

7. Advanced Icon Applications

▶ Example: CSS Animated Icons

❓ Frequently Asked Questions

📖 Summary

📝 Assignments

🙏 帮我们做得更好