Bootstrap 4 Icons

Welcome to The Coding College! While Bootstrap 4 doesn’t come with a built-in icon library, it integrates seamlessly with popular third-party libraries like Font Awesome and Bootstrap Icons. Icons are a fantastic way to enhance your website’s user interface and improve usability.

In this guide, we’ll explore how to add and use icons in Bootstrap 4 with third-party libraries.

Why Use Icons?

Icons serve various purposes:

  • Visual cues: Indicate actions or categories.
  • Improved accessibility: Help users quickly recognize functionality.
  • Aesthetic enhancement: Make your design more attractive.

Popular Icon Libraries for Bootstrap 4

Here are two widely used icon libraries compatible with Bootstrap 4:

  1. Font Awesome
  2. Bootstrap Icons

1. Using Font Awesome with Bootstrap 4

Font Awesome is one of the most popular icon libraries with thousands of free and premium icons.

Step 1: Include Font Awesome

Add Font Awesome’s CDN link to the <head> of your HTML file:

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

Step 2: Use Font Awesome Icons

Use the <i> tag with the appropriate class. Font Awesome icons have a fa prefix.

Example: Font Awesome Icons

<div>
  <i class="fas fa-home"></i> Home  
  <i class="fas fa-envelope"></i> Messages  
  <i class="fas fa-user"></i> Profile  
</div>
  • fas: Solid icons
  • far: Regular (outline) icons
  • fab: Brand icons (e.g., Facebook, Twitter)

Example: Icons in Buttons

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

2. Using Bootstrap Icons with Bootstrap 4

Bootstrap Icons is a library specifically designed for Bootstrap projects. While Bootstrap 4 didn’t originally include its own icons, Bootstrap Icons became a separate project compatible with all versions of Bootstrap.

Step 1: Include Bootstrap Icons

Add the Bootstrap Icons CDN link to your project:

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

Step 2: Use Bootstrap Icons

Bootstrap Icons are used with the <i> or <span> tag and the bi prefix.

Example: Bootstrap Icons

<div>
  <i class="bi bi-alarm"></i> Alarm  
  <i class="bi bi-bell"></i> Notification  
  <i class="bi bi-calendar"></i> Calendar  
</div>

Example: Icons in Navigation

<nav>
  <a href="#" class="mx-2"><i class="bi bi-house"></i> Home</a>
  <a href="#" class="mx-2"><i class="bi bi-person"></i> Profile</a>
  <a href="#" class="mx-2"><i class="bi bi-gear"></i> Settings</a>
</nav>

Customizing Icons

Both libraries allow you to style icons with CSS or Bootstrap utilities.

1. Change Size

Increase or decrease icon size using utility classes:

  • Font Awesome:
    • fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, etc. 
<i class="fas fa-home fa-2x"></i>
  • Bootstrap Icons:
    Style with font-size or Bootstrap’s text utilities: 
<i class="bi bi-bell" style="font-size: 2rem;"></i>

2. Change Color

Apply colors using Bootstrap’s text color utilities:

<i class="fas fa-heart text-danger"></i>  
<i class="bi bi-star text-warning"></i>

Icons in Components

Icons can be used in buttons, navigation bars, alerts, modals, and more.

Example: Icons in a Button Group

<div class="btn-group">
  <button class="btn btn-primary">
    <i class="fas fa-play"></i> Play
  </button>
  <button class="btn btn-danger">
    <i class="fas fa-stop"></i> Stop
  </button>
</div>

Example: Icons in Alerts

<div class="alert alert-info">
  <i class="bi bi-info-circle"></i> This is an informational alert.
</div>

Accessibility Tips for Icons

  • Use aria-hidden="true" for purely decorative icons: 
<i class="fas fa-check" aria-hidden="true"></i>
  • Provide descriptive text for screen readers using aria-label: 
<i class="fas fa-search" aria-label="Search"></i>

Conclusion

Adding icons to your Bootstrap 4 project can significantly enhance its usability and design. By leveraging libraries like Font Awesome and Bootstrap Icons, you gain access to a vast collection of icons to suit any purpose.

Leave a Comment