Bootstrap Glyphicons

Bootstrap 5 and Icons (Replacing Glyphicons)

Icons in Bootstrap 5

Bootstrap 3 included a set of 200 icons called Glyphicons Halflings. However, Glyphicons are not included in Bootstrap 4 or Bootstrap 5.

Bootstrap 5 encourages the use of SVGs for icons due to their scalability, accessibility benefits, and styling flexibility with CSS. While Bootstrap doesn’t bundle an icon set directly into its core CSS/JS anymore, it has its own official open-source SVG icon library called Bootstrap Icons.

Alternatives to Glyphicons for Bootstrap 5 projects include:

• Bootstrap Icons: A free, high-quality, open-source icon library specifically designed for Bootstrap components. You can include them as inline SVGs, external SVGs, or via a web font. (Recommended: Visit icons.getbootstrap.com)
• Font Awesome: A very popular and extensive icon library, available in free and pro versions.
• Material Design Icons: Google’s set of icons, widely used and available in various formats.
• Custom SVGs: You can create or source your own SVG icons.

Using Bootstrap Icons (Example Syntax)

If you choose to use Bootstrap Icons, there are several ways to integrate them. Here’s an example using the web font method (requires including the Bootstrap Icons CSS file):

<!-- 1. Include Bootstrap Icons CSS (e.g., from a CDN) in your <head> -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> -->

<!-- 2. Use the icon classes -->
<p>
  Envelope icon: <i class="bi bi-envelope"></i>
</p>
<p>
  Search icon on a button:
  <button type="button" class="btn btn-primary">
    <i class="bi bi-search"></i> Search
  </button>
</p>

<!-- Alternatively, using inline SVG sprite (more complex setup but often preferred for performance/customization) -->
<!--
<svg class="bi me-2" width="1em" height="1em" fill="currentColor">
  <use xlink:href="#envelope"/> // Assuming #envelope is defined in your SVG sprite
</svg>
-->

<!--
  Learning Tip: The easiest way to get started with Bootstrap Icons is often by using their CDN link for the CSS font version.
  For production, consider optimizing by embedding only the SVGs you need.
-->

Since this tutorial focuses on Bootstrap core and not a specific icon library’s implementation, further icon examples will use placeholder text or generic descriptions where icons were previously shown.

Updated Examples (Without Specific Icon Glyphs)

The following example shows how elements previously using Glyphicons would now be structured, perhaps with text labels or placeholders for where an icon from a chosen library would go:

<p>
  Envelope icon: [Envelope Icon] <!-- Placeholder for an icon like <i class="bi bi-envelope"></i> -->
</p>
<p>
  Envelope icon as a link:
  <a href="#">
    [Envelope Icon] Email Us <!-- Placeholder for an icon -->
  </a>
</p>
<p>
  Search icon: [Search Icon] <!-- Placeholder -->
</p>
<p>
  Search icon on a button:
  <button type="button" class="btn btn-outline-secondary">
    <!-- Example: <i class="bi bi-search"></i> --> Search
  </button>
</p>
<p>
  Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <!-- Example: <i class="bi bi-search"></i> --> Search
  </button>
</p>
<p>
  Print icon: [Print Icon] <!-- Placeholder -->
</p>
<p>
  Print icon on a styled link button:
  <a class="btn btn-success btn-lg" href="#">
    <!-- Example: <i class="bi bi-printer"></i> --> Print Document
  </a>
</p>

<!--
  Practical Application: Icons enhance user experience by providing quick visual cues for actions or information.
  Common Obstacle: Choosing an icon library and integrating it correctly. Bootstrap Icons is a good starting point for Bootstrap projects.
-->

Reference for Modern Icon Usage

For comprehensive information on using icons with Bootstrap 5, including the official Bootstrap Icons library, please visit: Bootstrap Icons Official Site.

You can also explore other popular libraries like Font Awesome or Material Icons and follow their respective integration guides.