Icons (No Built-In Set)

Prev Next

Bootstrap 3 shipped with a built-in icon font called Glyphicons. Bootstrap 4 dropped Glyphicons and replaced them with nothing — there is no icon set bundled with Bootstrap 4 at all. Bootstrap Icons, the official icon library, didn't exist yet either; it wasn't created until Bootstrap 5. So for the entire lifetime of Bootstrap 4, the normal move is to pair it with a separate icon library. This tutorial site (and TrailMap, our running example) uses Font Awesome.

Why Bootstrap 4 Has No Icons of Its Own

Version	Built-in icons
Bootstrap 3	Glyphicons, bundled directly
Bootstrap 4 (this track)	None — Glyphicons removed, nothing added to replace them
Bootstrap 5	Bootstrap Icons, a separate but official companion library

Note: if you see a Bootstrap 4 tutorial or theme using icon classes that look built-in, check the page's <head> — it's almost always Font Awesome, Material Icons, or a similar third-party library loaded separately, not anything Bootstrap 4 provides itself.

Adding Font Awesome via CDN

A single stylesheet link is enough to get the full Font Awesome icon set. This site's own <head> already loads it:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Once loaded, any icon renders with an empty <i> element carrying the fa base class plus an icon-specific class:

<i class="fa fa-heart"></i>
<i class="fa fa-map-o"></i>
<i class="fa fa-search"></i>

Worked Example: Icons on TrailMap's Trail Cards

A trail card using Font Awesome icons for a "save/favorite" action and a distance stat — neither one is a Bootstrap 4 class, both are plain Font Awesome:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      Ridgeline Loop
      <button class="btn btn-sm btn-outline-danger float-right" aria-label="Save trail">
        <i class="fa fa-heart"></i>
      </button>
    </h5>
    <p class="card-text text-muted">
      <i class="fa fa-road"></i> 6.2 mi ·
      <i class="fa fa-arrow-up"></i> 1,180 ft gain
    </p>
  </div>
</div>

Accessibility reminder: a purely decorative icon like the distance icon doesn't need its own label, but an icon-only interactive element like the heart button does — hence aria-label="Save trail" on the <button> itself, since the icon alone carries no readable text.

Next up, audit TrailMap's navbar for accessibility in Accessibility.

Prev Next