bootstrap_ref_comp_glyphs

Bootstrap 5: Using Icons (Replacing Glyphicons)

Bootstrap versions 4 and 5 no longer include the Glyphicons icon font or any other built-in icon set. This change encourages developers to use more flexible and modern solutions like SVG icons.

The core idea remains: icons enhance user interfaces by providing visual cues. This guide shows how to integrate popular icon libraries with Bootstrap 5.

Recommended Icon Solutions

While you can use any icon library, Bootstrap officially recommends its own Bootstrap Icons library. Other popular choices include Font Awesome or custom SVGs.

• Scalability: SVGs look sharp at any size.
• Customization: Easily change color, stroke, and other properties with CSS.
• Accessibility: SVGs can be made accessible with proper ARIA attributes and titles.
• Performance: Often more performant than icon fonts, especially if only a few icons are used.

Using Bootstrap Icons

Bootstrap Icons (https://icons.getbootstrap.com/) is Bootstrap’s official open-source icon library. You can include them in your project in several ways:

1. CDN Link (CSS): The quickest way to get started. Add the Bootstrap Icons CSS link to your HTML’s <head>.
2. NPM Installation: For projects using a build process (npm install bootstrap-icons).
3. Embedded SVGs: Copy the SVG code directly into your HTML.
4. SVG Sprite: Use an SVG sprite for better performance with many icons.

Example: Including Bootstrap Icons via CDN and using CSS classes:

<!-- 1. Add this to your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<!-- 2. Use icons in your HTML -->
<p>
  Envelope icon: <i class="bi bi-envelope-fill"></i>
</p>
<p>
  Search icon: <i class="bi bi-search"></i>
</p>
<button type="button" class="btn btn-primary">
  <i class="bi bi-printer-fill"></i> Print Document
</button>

<p>
  Calendar icon with custom size and color:
  <i class="bi bi-calendar-event" style="font-size: 2rem; color: cornflowerblue;"></i>
</p>

<!-- Tip: You can style icons (size, color) using CSS font-size and color properties, or Bootstrap text utility classes. -->

Example: Using an embedded SVG from Bootstrap Icons:

<p>
  Heart icon (embedded SVG):
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill text-danger" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
  </svg>
</p>

<!--
  Note: You'd typically copy the SVG code for the desired icon from the Bootstrap Icons website.
  The `width`, `height`, and `fill="currentColor"` attributes are important for proper display and CSS color inheritance.
  Adding a class like `bi` can be useful for common styling if needed.
-->

Overview of Icon Options

The following table summarizes common approaches to using icons with Bootstrap 5:

Icon Solution	Primary Usage Method	Example (Conceptual)	Where to Find / Learn More
Bootstrap Icons	CSS classes (via CDN/NPM), Embedded SVG, SVG Sprite	<i class="bi bi-alarm"></i> or <svg>...</svg>	Official Website: icons.getbootstrap.com
Font Awesome	CSS classes (after setup), SVG with JS	<i class="fas fa-heart"></i> or <svg class="svg-inline--fa">...</svg>	Official Website: fontawesome.com
Other SVG Libraries (e.g., Feather Icons, Material Icons)	Varies (often Embedded SVG, CSS classes, or JS components)	Depends on the library	Search for specific libraries (e.g., ‘Feather Icons’, ‘Material Design Icons’)
Custom SVGs	Directly embed <svg> code, use <img> tag with SVG source, or create an SVG sprite	<svg>...</svg> or <img src="path/to/icon.svg" alt="Description">	Create with vector graphics editor (Illustrator, Inkscape, Figma) or download from icon marketplaces.

Key takeaway: While Bootstrap doesn’t bundle icons, it fully supports modern icon usage. Choose the solution that best fits your project’s needs and workflow.

For further guidance on accessibility with icons, refer to resources like: https://www.w3.org/WAI/tutorials/images/icons/