Bootstrap Glyphicons

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Add Icons with Bootstrap Icons

In this Bootstrap tutorial, you’ll learn how to use Bootstrap Icons to add scalable, customizable icons to your webpage. Icons enhance buttons, menus, and content, and we’ll pair them with images for a vibrant look.

What You’ll Learn

Adding basic icons
Using icons in buttons
Combining icons with text
Pairing icons with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Icons

Bootstrap Icons is an open-source icon library that replaces Glyphicons from Bootstrap 3. Use the <i> tag with classes like bi bi-star to add icons. Icons are scalable and styleable with CSS.

Assume Bootstrap Icons and CSS are included in your project (we’ll skip the <link> tag as requested).

Step 2: Add Basic Icons

Start with standalone icons for decoration. Use this code:

<div class="container">
    <h3>Basic Icons</h3>
    <i class="bi bi-heart me-2"></i>
    <i class="bi bi-star me-2"></i>
    <i class="bi bi-bell"></i>
</div>

Explanation:

container: Centers and constrains content.
bi bi-heart, bi bi-star, bi bi-bell: Adds heart, star, and bell icons.
me-2: Adds margin-right for spacing.

These icons display as simple, scalable graphics.

Step 3: Use Icons in Buttons

Add icons to buttons for enhanced functionality. Try this:

<div class="container">
    <h3>Icons in Buttons</h3>
    <button class="btn btn-primary me-2">
        <i class="bi bi-play"></i> Play
    </button>
    <button class="btn btn-danger">
        <i class="bi bi-trash"></i> Delete
    </button>
</div>

Explanation:

btn btn-primary: Blue button with a play icon.
btn btn-danger: Red button with a trash icon.
i inside button: Embeds the icon before text.

Icons make the buttons more intuitive.

Step 4: Combine Icons with Text

Pair icons with text for labels or navigation. Use this:

<div class="container">
    <h3>Icons with Text</h3>
    <p><i class="bi bi-envelope me-2"></i>Email: info@example.com</p>
    <p><i class="bi bi-geo-alt me-2"></i>Location: 123 Main St</p>
</div>

Explanation:

bi bi-envelope, bi bi-geo-alt: Adds envelope and location pin icons.
me-2: Spaces icons from text.

This creates clear, icon-enhanced text labels.

Step 5: Pair Icons with an Image

Combine an icon-enhanced button with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Profile Action</h3>
            <p>Manage your account with ease.</p>
            <button class="btn btn-success">
                <i class="bi bi-person"></i> Edit Profile
            </button>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into text/button (8 units) and image (4 units).
btn btn-success with bi bi-person: Green button with a person icon.
Uses a 200×150 green image for vibrancy.

The image adds visual appeal to the icon-button combo.

Final Code

Here’s a combined example with varied icon uses and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Icon Set</h3>
            <i class="bi bi-camera me-2"></i>
            <i class="bi bi-chat me-2"></i>
            <i class="bi bi-gear"></i>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Button Actions</h3>
            <button class="btn btn-primary me-2">
                <i class="bi bi-download"></i> Download
            </button>
            <a href="#" class="btn btn-warning">
                <i class="bi bi-exclamation-triangle"></i> Report
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Feature Highlight</h3>
            <p>Explore new tools today.</p>
            <button class="btn btn-success">
                <i class="bi bi-rocket"></i> Launch Now
            </button>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A row with camera, chat, and gear icons.
A row with a blue download button and a yellow report link, both with icons.
A two-column section with a green button (rocket icon), text, and a red image (250×150).
All icons and buttons are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Visit the Bootstrap Icons Docs for more icon options.
Style icons with text-primary or fs-3 for color and size changes.
Use icons in Bootstrap navbars for enhanced menus.

Conclusion

You’ve mastered Bootstrap Icons! With classes like bi bi-rocket and bi bi-person, plus striking images, you’ve added dynamic icons to buttons and text. Keep experimenting to enhance your webpages.