Bootstrap Icons

As mentioned back in Why Bootstrap 5?, Bootstrap dropped Glyphicons years ago and never bundled a replacement icon set into the core CSS/JS files. Instead, icons live in a completely separate project — Bootstrap Icons — with its own stylesheet and its own version number. TrailMap needs its own line for it, and once that's added, icons drop in with a single <i> tag and a class name.

Adding Bootstrap Icons via CDN

One extra stylesheet link, placed alongside the regular Bootstrap CSS link in <head>: 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
Note: Bootstrap Icons is versioned independently from Bootstrap itself — bootstrap-icons@1.11.3 isn't tied to Bootstrap's own 5.3.3. Check the project's own releases when you want the newest icons.

Using an Icon

Every icon is an empty <i> (or <span>) element carrying two classes: the base bi class, plus bi-{icon-name} for the specific glyph: 

<i class="bi bi-heart"></i>
<i class="bi bi-geo-alt-fill"></i>
<i class="bi bi-star-fill"></i>

Bootstrap Icons ships as a webfont with a matching CSS file (an SVG sprite version is also available for projects that prefer inlined <svg> markup) — either way, there is no <img> tag or image file involved for a single icon.

Sizing Icons with font-size

Because the font-based icons render as text glyphs, they scale with ordinary font-size — including Bootstrap's own text-size utility classes, or a fixed pixel value for a very specific spot like a big empty-state icon: 

<i class="bi bi-signpost-split fs-1"></i> <!-- large, via Bootstrap's fs-1 utility -->
<i class="bi bi-signpost-split" style="font-size: 3rem;"></i> <!-- or an exact size -->

Worked Example: Favorite Heart & Location Pin on TrailMap Cards

A TrailMap trail card commonly needs two icons: a clickable heart to favorite the trail, and a map-pin to show its location — both are plain <i> elements, no image assets: 

<div class="card">
  <img src="eagle-ridge.jpg" class="card-img-top" alt="Eagle Ridge Trail">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-start">
      <h5 class="card-title">Eagle Ridge Trail</h5>
      <button class="btn btn-sm btn-outline-danger" type="button" aria-label="Favorite this trail">
        <i class="bi bi-heart"></i>
      </button>
    </div>
    <p class="card-text text-muted small">
      <i class="bi bi-geo-alt-fill"></i> Blue Ridge Mountains, VA
    </p>
  </div>
</div>
Note: the favorite button has aria-label="Favorite this trail" because it only contains an icon — with no visible text, a screen reader would otherwise announce nothing meaningful for the button. More on this in the upcoming Accessibility lesson.
Next: Icons are dropped onto individual elements. Advanced Grid covers laying out a whole row of TrailMap cards without hand-writing a column class on every one.