Bootstrap - Bootstrap Glyphicons

Bootstrap Glyphicons were icon fonts included in Bootstrap 3. They allowed developers to easily add vector-based icons to buttons, menus, alerts, or anywhere in their UI. However, Glyphicons are not included in Bootstrap 4 or 5, so alternative icon libraries like Bootstrap Icons, Font Awesome, or Material Icons are used in modern projects.

1. What Are Glyphicons?

Glyphicons are icon fonts bundled with Bootstrap 3.
They provide scalable icons that can be styled with CSS (color, size, hover effects, etc.).
Each icon uses a specific CSS class to render.

2. Using Glyphicons in Bootstrap 3

Syntax:

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

Example:

<button type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>

Explanation:

.glyphicon → Base class for all icons.
.glyphicon-search → Specific icon (here, a magnifying glass).
aria-hidden="true" → Hides the icon from screen readers for accessibility.

3. Common Glyphicon Classes

Here are some popular Bootstrap 3 Glyphicons:

Icon Name	Class	Use Case
Search	`glyphicon glyphicon-search`	Search buttons
Home	`glyphicon glyphicon-home`	Home links
User	`glyphicon glyphicon-user`	User accounts
Envelope	`glyphicon glyphicon-envelope`	Email/Contact
Trash	`glyphicon glyphicon-trash`	Delete actions
Plus	`glyphicon glyphicon-plus`	Add actions
Pencil	`glyphicon glyphicon-pencil`	Edit actions
Remove / Close	`glyphicon glyphicon-remove`	Close or delete
Ok / Check	`glyphicon glyphicon-ok`	Confirmations

Example – Multiple Icons:

<button class="btn btn-success">
  <span class="glyphicon glyphicon-ok"></span> Save
</button>

<button class="btn btn-danger">
  <span class="glyphicon glyphicon-trash"></span> Delete
</button>

<button class="btn btn-info">
  <span class="glyphicon glyphicon-info-sign"></span> Info
</button>

4. Sizing Glyphicons

Glyphicons inherit the font size of the parent element. You can resize them using CSS classes:

<span class="glyphicon glyphicon-star" style="font-size:24px;"></span>
<span class="glyphicon glyphicon-star" style="font-size:48px;"></span>

5. Glyphicons with Buttons and Alerts

Example – Button:

<button class="btn btn-primary">
  <span class="glyphicon glyphicon-download"></span> Download
</button>

Example – Alert:

<div class="alert alert-success">
  <span class="glyphicon glyphicon-ok-sign"></span> Operation successful!
</div>

6. Bootstrap 3 vs Bootstrap 4 & 5

Feature	Bootstrap 3	Bootstrap 4 & 5
Icon support	Glyphicons included	Glyphicons removed
Alternative icons	N/A	Use Bootstrap Icons, Font Awesome, or Material Icons
Implementation	`<span class="glyphicon glyphicon-*"></span>`	`<i class="bi bi-*"></i>` (Bootstrap Icons)

Important: Glyphicons were licensed under Halflings, and their use is tied to Bootstrap 3. For modern projects, use Bootstrap Icons, which are free and actively maintained.

7. Bootstrap Icons Alternative (Bootstrap 4 & 5)

Since Glyphicons are deprecated, here’s how to use Bootstrap Icons:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

<button class="btn btn-primary">
  <i class="bi bi-search"></i> Search
</button>

<i class="bi bi-search"></i> → Replaces <span class="glyphicon glyphicon-search"></span>.

8. Example – Bootstrap 3 Glyphicons

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Glyphicons Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body class="p-4">

  <h2>Bootstrap 3 Glyphicons</h2>

  <!-- Buttons -->
  <button class="btn btn-primary">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
  <button class="btn btn-success">
    <span class="glyphicon glyphicon-ok"></span> Save
  </button>
  <button class="btn btn-danger">
    <span class="glyphicon glyphicon-trash"></span> Delete
  </button>

  <!-- Alerts -->
  <div class="alert alert-info mt-3">
    <span class="glyphicon glyphicon-info-sign"></span> Information alert
  </div>

  <div class="alert alert-success mt-2">
    <span class="glyphicon glyphicon-ok-sign"></span> Success alert
  </div>

</body>
</html>