Icon font usage in Bootsrap

Introduction

Icon fonts let you add small pictures (icons) to your website easily. They look sharp on all screen sizes and load fast.

You want to add simple icons like arrows, stars, or social media logos to buttons or menus.

You need icons that scale well on different screen sizes without losing quality.

You want to keep your website fast by using fonts instead of many image files.

You want to style icons with CSS colors and sizes easily.

You want consistent icons that match your website style.

Syntax

Bootsrap

<i class="bi bi-icon-name"></i>

Replace icon-name with the actual icon name from Bootstrap Icons.

Use the i tag with Bootstrap icon classes to show the icon.

Examples

This shows an alarm clock icon.

Bootsrap

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

This shows a filled heart icon.

Bootsrap

<i class="bi bi-heart-fill"></i>

This shows a right arrow icon, bigger and red colored.

Bootsrap

<i class="bi bi-arrow-right" style="font-size: 2rem; color: red;"></i>

Sample Program

This example shows how to add Bootstrap icons using the i tag with classes. The alarm icon is big and blue. The button has a heart icon next to the text. We also add aria-hidden="true" to icons to improve accessibility.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Icon Font Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f9f9f9;
      color: #333;
    }
    .icon-large {
      font-size: 3rem;
      color: #007bff;
      margin-right: 1rem;
      vertical-align: middle;
    }
    button {
      font-size: 1.25rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
      background-color: #007bff;
      border: none;
      color: white;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
    }
    button .bi {
      margin-left: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Using Bootstrap Icon Fonts</h1>
  <p>Here is an alarm icon:</p>
  <i class="bi bi-alarm icon-large" aria-hidden="true"></i>
  <p>And a button with a heart icon:</p>
  <button type="button" aria-label="Like">
    Like <i class="bi bi-heart-fill" aria-hidden="true"></i>
  </button>
</body>
</html>

Important Notes

Always include the Bootstrap Icons CSS link in your <head> to load the icons.

Use aria-hidden="true" on icons that are decorative to help screen readers ignore them.

You can change icon size and color with CSS just like text.

Summary

Icon fonts let you add scalable, styleable icons easily.

Use the i tag with Bootstrap icon classes like bi bi-alarm.

Remember to include the Bootstrap Icons CSS file in your page.

Practice

1. What is the correct way to add a Bootstrap icon for an alarm in your HTML?

easy

A. <img src='alarm.svg' class='bi'>

B. <icon name='alarm'></icon>

C. <span class='icon-alarm'></span>

D. <i class='bi bi-alarm'></i>

Solution

1. Step 1: Understand Bootstrap icon usage

   Bootstrap icons use the i tag with classes starting with bi to display icons.

2. Step 2: Identify the correct class for alarm icon

   The alarm icon uses the class bi-alarm, so the full class is bi bi-alarm.

3. Final Answer:

   <i class='bi bi-alarm'></i> -> Option D

4. Quick Check:

   Bootstrap icon tag = <i class='bi bi-iconname'></i> [OK]

Hint: Use <i> tag with 'bi bi-iconname' classes [OK]

Common Mistakes:

• Using <icon> tag which is not valid
• Using <span> without correct classes
• Using <img> instead of icon font

2. Which of the following is the correct syntax to include a Bootstrap icon for a 'check' mark?

easy

A. <i class='bi bi-check'></i>

B. <span class='bi-check'></span>

C. <i class='bi-check'></i>

D. <icon class='bi bi-check'></icon>

Solution

1. Step 1: Recall Bootstrap icon class format

   Bootstrap icons require two classes: bi and the specific icon name like bi-check.

2. Step 2: Check the tag and classes

   The correct tag is i with both classes: bi bi-check.

3. Final Answer:

   <i class='bi bi-check'></i> -> Option A

4. Quick Check:

   Two classes: 'bi' + 'bi-iconname' on <i> tag [OK]

Hint: Always use both 'bi' and 'bi-iconname' classes [OK]

Common Mistakes:

• Using only one class instead of two
• Using wrong tag like <span> or <icon>
• Missing the 'bi' base class

3. What will be the visual result of this HTML snippet?

<i class='bi bi-alarm'></i> Alarm

medium

A. A broken image icon followed by the text 'Alarm'

B. Only the text 'Alarm' without any icon

C. A text 'Alarm' with a small alarm clock icon before it

D. An error message because i tag is invalid

Solution

1. Step 1: Understand icon font rendering

   The i tag with classes bi bi-alarm renders a scalable alarm icon before the text.

2. Step 2: Check the text placement

   The text 'Alarm' appears after the icon, so the user sees the icon followed by the word.

3. Final Answer:

   A text 'Alarm' with a small alarm clock icon before it -> Option C

4. Quick Check:

   Icon + text = icon visible before text [OK]

Hint: Icon class shows icon before text inside same element [OK]

Common Mistakes:

• Thinking icon won't show without <img>
• Assuming <i> tag is invalid
• Expecting icon after text instead of before

4. You wrote this code but the icon does not appear:

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

What is the likely problem?

medium

A. The class 'bi-alarm' is incorrect; it should be 'icon-alarm'.

B. You forgot to include the Bootstrap Icons CSS file in your page.

C. The i tag cannot be used for icons.

D. You need to use <span> instead of <i>.

Solution

1. Step 1: Check icon class usage

   The class 'bi-alarm' alone is not enough; Bootstrap icons require both 'bi' and 'bi-alarm' classes.

2. Step 2: Verify CSS inclusion

   Even with correct classes, if the Bootstrap Icons CSS file is missing, icons won't show.

3. Final Answer:

   You forgot to include the Bootstrap Icons CSS file in your page. -> Option B

4. Quick Check:

   Missing CSS file = icons not visible [OK]

Hint: Always include Bootstrap Icons CSS file in your HTML [OK]

Common Mistakes:

• Using only one class instead of two
• Not linking the Bootstrap Icons CSS file
• Thinking <i> tag is invalid for icons

5. You want to add a responsive icon button that shows a 'trash' icon and a label 'Delete' side by side, with the icon scaling nicely on all screen sizes. Which is the best approach?

hard

A. <button class='btn btn-danger'><i class='bi bi-trash'></i> Delete</button>

B. <button class='btn btn-danger'><img src='trash.svg' alt='trash icon'> Delete</button>

C. <button class='btn btn-danger'><span class='icon-trash'></span> Delete</button>

D. <button class='btn btn-danger'><i class='icon-trash'></i> Delete</button>

Solution

1. Step 1: Choose scalable icon method

   Bootstrap icons use i tag with classes like bi bi-trash for scalable vector icons that scale well on all devices.

2. Step 2: Combine icon with button and label

   Placing the icon inside the button before the text label ensures they appear side by side and respond to button styling.

3. Final Answer:

   <button class='btn btn-danger'><i class='bi bi-trash'></i> Delete</button> -> Option A

4. Quick Check:

   Use <i> with 'bi bi-icon' inside button for responsive icons [OK]

Hint: Use inside buttons for scalable icons [OK]

Common Mistakes:

• Using <img> which may not scale well
• Using wrong classes like 'icon-trash'
• Not placing icon inside button element