Bootstrap Glyphicons

Icons play an essential role in modern web development, helping users navigate your website efficiently and improving visual appeal. With Bootstrap Glyphicons, you gain access to a library of over 200 sleek, ready-to-use icons built directly into Bootstrap 3.

In this guide, TheCodingCollege.com explains how to use, customize, and maximize the potential of Glyphicons to enhance your user interface.

What Are Glyphicons?

Glyphicons are icon fonts included with Bootstrap 3. These icons are vector-based, meaning they scale perfectly on any screen size, from desktop to mobile devices.
They can be used in:

• Buttons
• Navigation bars
• Alerts
• Forms
• Anywhere else icons are needed!

Getting Started with Bootstrap Glyphicons

Using Glyphicons is straightforward. Each icon is implemented using a combination of the <span> tag and the appropriate icon class.

Basic Syntax:

<span class="glyphicon glyphicon-icon-name"></span>

Replace icon-name with the name of the desired icon.

Example:

<span class="glyphicon glyphicon-search"></span>

Output:

This displays the search icon.

Popular Glyphicons and Their Classes

Here are some of the most commonly used Glyphicons:

Example of Multiple Icons:

<div>
    <span class="glyphicon glyphicon-home"></span> Home  
    <span class="glyphicon glyphicon-user"></span> Profile  
    <span class="glyphicon glyphicon-envelope"></span> Messages  
</div>

Output:

A set of icons paired with text for quick navigation.

Using Glyphicons in Buttons

Icons can easily be integrated with buttons for enhanced functionality.

Example – Icon in a Button:

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

Output:

A button labeled “Search” with the search icon displayed beside the text.

Using Glyphicons in Forms

Glyphicons can improve form usability by serving as visual cues for fields like email, passwords, or search.

Example – Icon in Input Field:

<div class="input-group">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-envelope"></span>
    </span>
    <input type="email" class="form-control" placeholder="Enter your email">
</div>

Output:

An input field with an email icon inside the field’s label.

Customizing Glyphicons

Although Glyphicons come with pre-defined styles, you can customize them with CSS to fit your design.

Example – Change Icon Color and Size:

<style>
    .custom-icon {
        color: #28a745;
        font-size: 24px;
    }
</style>

<span class="glyphicon glyphicon-star custom-icon"></span>

Output:

The star icon is now green and enlarged.

Combining Multiple Glyphicons

You can combine multiple icons to create more complex elements.

Example – Icon Pairing:

<div>
    <span class="glyphicon glyphicon-star"></span>  
    <span class="glyphicon glyphicon-ok"></span>  
    <span class="glyphicon glyphicon-trash"></span>
</div>

Output:

A row of three icons: star, checkmark, and trash.

Glyphicons for Accessibility

To ensure accessibility, always use aria-labels or screen-reader-friendly attributes with your icons.

Example – Accessible Icon:

<span class="glyphicon glyphicon-search" aria-label="Search Icon"></span>

This ensures screen readers can interpret the icon’s purpose.

Common Use Cases for Glyphicons

1. Navigation Bars: Add visual icons to enhance menu items.
2. Buttons: Improve the functionality and clarity of call-to-action buttons.
3. Alerts and Messages: Use icons to signify the type of alert (success, error, etc.).
4. Forms: Provide visual hints for input fields.

Example – Navigation Bar with Icons:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
        </ul>
    </div>
</nav>

Best Practices for Using Glyphicons

1. Use Sparingly: Don’t overload your design with too many icons; it can overwhelm users.
2. Pair Icons with Text: Ensure icons are paired with text for better clarity, especially for first-time visitors.
3. Stay Consistent: Use the same icon style throughout your website.
4. Keep Accessibility in Mind: Add alt text or aria-labels for icons to assist visually impaired users.

Advantages of Bootstrap Glyphicons

• Scalability: Looks great on all screen sizes and resolutions.
• Lightweight: No need for external icon libraries; Glyphicons are built into Bootstrap 3.
• Ease of Use: Requires just a few classes to implement.

Limitations of Glyphicons

While Glyphicons are a powerful feature, they are limited to Bootstrap 3. If you’re using Bootstrap 4 or higher, you’ll need to integrate external icon libraries such as Font Awesome or Bootstrap Icons.

Conclusion

Bootstrap Glyphicons are a quick and easy way to add professional, scalable icons to your website. Whether you’re building navigation menus, buttons, or forms, Glyphicons provide a versatile toolset for enhancing your UI design.