Glyphicons

Prev Next

Bootstrap 3 ships its own icon font, Glyphicons, right inside bootstrap.min.css — you don't add a separate stylesheet, script, or CDN link the way you would for Font Awesome. Just add a <span> with the right classes and the icon appears. We'll go through the syntax, a handful of icons you'll reach for constantly, combining them with buttons and inputs, and finish with a TrailMap star rating and a search box.

Basic Usage

Every Glyphicon is an empty <span> with two classes: the base .glyphicon and a specific .glyphicon-{name}. Add aria-hidden="true" since the icon carries no text content for screen readers.

<span class="glyphicon glyphicon-star" aria-hidden="true"></span>

Bootstrap-3-only: Glyphicons are built into Bootstrap 3 — no extra library needed. Bootstrap 4 dropped Glyphicons entirely with no built-in replacement; its docs point you to a third-party icon set instead, most commonly Font Awesome (which, notice, is already loaded via CDN on this very page for the site's own UI arrows).

Commonly Used Icons

Class	Typical use
`.glyphicon-star`	Ratings, favorites, featured items
`.glyphicon-heart`	"Like" or save-to-wishlist actions
`.glyphicon-search`	Search inputs and buttons
`.glyphicon-map-marker`	Locations, pins on a list or map
`.glyphicon-user`	Profile links, account menus

Icons Inside Buttons

Drop a glyphicon span in front of a button's label and add a space after it for a comfortable gap:

<button type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Save Trail
</button>

Icons Inside Inputs

Pair a glyphicon with .input-group-addon to prefix a text input with an icon — a search box is the classic example:

<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </span>
  <input type="text" class="form-control" placeholder="Search trails...">
</div>

TrailMap Example: Star Rating and Search

TrailMap shows a trail's difficulty as filled and empty stars, plus a search box on the trail list page — both built entirely from Glyphicons, no image files or icon library needed:

<!-- TrailMap: difficulty rating shown as stars -->
<div class="trail-rating">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
  <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
  <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
  <span class="sr-only">3 out of 5 - Moderate</span>
</div>

<!-- TrailMap: search box on the trail list page -->
<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </span>
  <input type="text" class="form-control" placeholder="Search by trail name or park...">
</div>

Up next: Icons pair naturally with small text tags too. In Labels we cover the color-coded .label component for tagging content inline.

Prev Next