Using Icons in Bootstrap: Glyphicons

Introduction to Glyphicons

Glyphicons are a set of small, scalable icons that were originally included with Bootstrap 3. They help enhance user interfaces by adding visual indicators and improving navigation. In Bootstrap 4 and 5, Glyphicons are no longer included, but other icon libraries like Font Awesome or Bootstrap Icons can be used instead.

Below, we’ll look at how to integrate icons using Font Awesome in Bootstrap projects, simulating the use of Glyphicons.

Setting Up Font Awesome

To use Font Awesome in your project, you can add a link to the Font Awesome CDN in the <head> of your HTML document:

Example: Adding Font Awesome

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

Explanation

  • <link>: Adds a link to the Font Awesome CSS file, allowing you to use icons in your HTML.
  • rel="stylesheet": Specifies that this is a stylesheet link.

Using Icons in Buttons

Icons can make buttons more visually appealing and provide users with a quick understanding of the button's function. Here’s how to use icons from Font Awesome in buttons.

Example: Button with Icon

    <button type="button" class="btn btn-primary">
        <i class="fas fa-download"></i> Download
    </button>

Explanation

  • <i>: Represents an icon element, using Font Awesome's fas fa-download classes to display a download icon.
  • btn btn-primary: Bootstrap button classes to style the button.

Using Icons in Navigation

Icons can also be useful in navigation bars to indicate different sections or actions.

Example: Navigation Item with Icon

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <i class="fas fa-home"></i> Home
        </a>
    </nav>

Explanation

  • <nav>: Creates a navigation container.
  • <a>: Adds a navigation link with a home icon using the fas fa-home class from Font Awesome.

Icon List Example

Icons are often used alongside list items to represent different categories or actions.

Example: List with Icons

    <ul class="list-group">
        <li class="list-group-item"><i class="fas fa-check-circle"></i> Task Completed</li>
        <li class="list-group-item"><i class="fas fa-times-circle"></i> Task Pending</li>
    </ul>

Explanation

  • <ul>: Creates an unordered list.
  • <i class="fas fa-check-circle"></i>: Adds a Font Awesome check icon for completed tasks.
  • <i class="fas fa-times-circle"></i>: Adds a Font Awesome cross icon for pending tasks.

Expected Output

With these examples, your web application should have visually appealing icons that make navigation and action items more intuitive. You can see icons in buttons, navigation links, and lists.

Although Glyphicons are no longer included in Bootstrap by default, these examples show how to achieve similar functionality with Font Awesome.