BootstrapHow-ToBeginner · 3 min read

How to Install Bootstrap Icons Quickly and Easily

To install Bootstrap Icons, you can either add the official CDN link in your HTML <head> section or install via npm for local use. Using the CDN is the fastest way by adding <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"> to your page.

📐

Syntax

There are two main ways to install Bootstrap Icons:

CDN link: Add a <link> tag in your HTML to load icons from a content delivery network.
npm package: Install the icons locally using npm install bootstrap-icons and include the CSS in your project.

After installation, use icons by adding <i class="bi bi-icon-name"></i> in your HTML.

html

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

<!-- npm install command -->
npm install bootstrap-icons

<!-- Usage in HTML -->
<i class="bi bi-alarm"></i>

💻

Example

This example shows how to add Bootstrap Icons using the CDN and display a few icons on a webpage.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Icons Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .icon { font-size: 3rem; margin: 10px; color: #0d6efd; }
  </style>
</head>
<body>
  <h1>Bootstrap Icons Demo</h1>
  <i class="bi bi-alarm icon" aria-label="Alarm icon" role="img"></i>
  <i class="bi bi-battery-full icon" aria-label="Battery full icon" role="img"></i>
  <i class="bi bi-calendar icon" aria-label="Calendar icon" role="img"></i>
</body>
</html>

Output

A webpage with a heading 'Bootstrap Icons Demo' and three large blue icons: alarm, battery full, and calendar displayed horizontally.

⚠️

Common Pitfalls

Common mistakes when installing Bootstrap Icons include:

Forgetting to add the <link> tag for the CSS, so icons don't show.
Using incorrect icon class names (e.g., missing the bi prefix).
Not including the correct version in the CDN URL, which may cause 404 errors.
Trying to use icons without internet access when relying on CDN.

Always check the icon name on the official Bootstrap Icons website and ensure the CSS is loaded.

html

<!-- Wrong: Missing 'bi' prefix -->
<i class="alarm"></i>

<!-- Right: Correct class with 'bi' prefix -->
<i class="bi bi-alarm"></i>

📊

Quick Reference

Summary tips for installing Bootstrap Icons:

Use the CDN link for quick setup: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css
For local projects, install via npm install bootstrap-icons and import the CSS.
Use icons with <i class="bi bi-icon-name"></i>.
Check the official icon list for correct names: Bootstrap Icons.

✅

Key Takeaways

Add the Bootstrap Icons CSS via CDN or npm to use icons in your project.

Use the correct icon class format: bi bi-icon-name.

Check the official Bootstrap Icons site for valid icon names.

CDN is fastest for quick demos; npm is better for local development.

Always include the CSS link before using icon classes in HTML.