Tutorial: Getting Started with Bootstrap Icons

1. Introduction

Goal of the Tutorial

This tutorial aims to introduce you to Bootstrap Icons, a versatile and open-source icon library. We will guide you on how to install the library and incorporate these icons into your web projects.

Learning Outcomes

By the end of this tutorial, you will be able to:

• Install the Bootstrap Icons library
• Use Bootstrap Icons in your HTML code
• Follow best practices when using Bootstrap Icons

Prerequisites

You should have a basic understanding of HTML and CSS. Familiarity with Bootstrap, while not necessary, can be useful.

2. Step-by-Step Guide

Installation

To use Bootstrap Icons, you first need to install the icon library. The easiest way to do this is to include the following CDN link in your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.css">

Usage

Once you've included the Bootstrap Icons library in your project, you can start using the icons. Each icon is represented as an HTML element with a class that starts with bi and includes the icon’s name.

Here's an example of how to use the alarm icon:

<i class="bi bi-alarm"></i>

Best Practices

When using Bootstrap Icons, keep the following tips in mind:

• Always include the bi class when using an icon.
• Use Bootstrap’s spacing utilities to add space between icons and other elements.
• Consider accessibility: use the aria-hidden="true" attribute to hide icons from screen readers, and provide alternative text or labels when necessary.

3. Code Examples

Example 1: Using an Icon

<i class="bi bi-alarm"></i>

In this example, we're using the bi-alarm icon. The i tag is commonly used for icons, and the class bi bi-alarm specifies which icon to display.

Example 2: Adding Space Between Icons

<i class="bi bi-alarm me-3"></i>
<i class="bi bi-bell"></i>

Here, we're using two icons: bi-alarm and bi-bell. We're also using the me-3 class to add some space to the right of the alarm icon. This class is part of Bootstrap’s spacing utilities.

Example 3: Making Icons Accessible

<i class="bi bi-alarm" aria-hidden="true"></i>
<span class="visually-hidden">Alarm icon</span>

In this example, we're making the bi-alarm icon accessible. We're using the aria-hidden="true" attribute to hide the icon from screen readers, and the visually-hidden class to provide alternative text.

4. Summary

We've covered how to install the Bootstrap Icons library, use the icons in HTML, and follow best practices for usage. If you want to explore more icons, check out the official Bootstrap Icons library.

5. Practice Exercises

Exercise 1: Add the bi-emoji-smile Icon

Add the bi-emoji-smile icon to a webpage.

Solution:

<i class="bi bi-emoji-smile"></i>

Exercise 2: Add Two Icons with Space Between Them

Add the bi-alarm and bi-bell icons to a webpage, with some space between them.

Solution:

<i class="bi bi-alarm me-3"></i>
<i class="bi bi-bell"></i>

Exercise 3: Make an Icon Accessible

Add the bi-alarm icon to a webpage and make it accessible.

Solution:

<i class="bi bi-alarm" aria-hidden="true"></i>
<span class="visually-hidden">Alarm icon</span>

Remember, practice makes perfect! The more you use Bootstrap Icons, the more comfortable you'll become with them. Happy coding!