Icon font usage in Bootsrap - Mini Project: Build & Apply

Using Bootstrap Icon Fonts in a Webpage

📖 Scenario: You are creating a simple webpage for a small business. You want to add some icons next to the contact information to make it look friendly and clear.

🎯 Goal: Build a basic HTML page that uses Bootstrap icon fonts to show a phone icon and an email icon next to the contact details.

📋 What You'll Learn

Use Bootstrap 5 icon font library via CDN

Create a header with the business name

Add a phone number with a phone icon

Add an email address with an email icon

Use semantic HTML elements

Make sure the icons are visible and aligned with the text

💡 Why This Matters

🌍 Real World

Many websites use icon fonts like Bootstrap Icons to add visual cues that help users quickly understand information, such as contact details or navigation.

💼 Career

Knowing how to include and use icon fonts is a common skill for front-end web developers and designers to create user-friendly and visually appealing websites.

1

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en", meta charset="UTF-8", and meta viewport tags inside the <head>. Add a <header> with an <h1> containing the text "My Business" inside the <body>.

Bootsrap

    
    
    My Business


    
        My Business
    
    

Hint

Start with a simple HTML page. Use the lang attribute on the <html> tag and add the required meta tags inside <head>.

2

Add Bootstrap Icons CDN link

Inside the <head>, add the Bootstrap Icons CSS CDN link: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">.

Bootsrap

    
    
    My Business
    
    


    
        My Business
    

Hint

Use the <link> tag with rel="stylesheet" and the exact href URL for Bootstrap Icons.

3

Add contact info with icons

Below the <header>, add a <main> section. Inside it, add a <p> with a phone icon using <i class="bi bi-telephone"></i> followed by the text " Phone: [phone]". Then add another <p> with an email icon using <i class="bi bi-envelope"></i> followed by the text " Email: [e-mail]".

Bootsrap

    
    
    My Business
    


    
        My Business
    
    
    

Hint

Use the <i> tag with the correct Bootstrap icon classes inside paragraphs for phone and email.

4

Add footer with accessibility and responsive design

Add a <footer> below the <main> with the text "© 2024 My Business". Add aria-label="Footer" to the <footer> for accessibility. Also, add a <style> block inside <head> that sets the body font size to 1.125rem and uses Flexbox to center the content vertically and horizontally with a minimum height of 100vh.

Bootsrap

    
    
    My Business
    
    
    


    
        My Business
    
    
         Phone: [phone]
         Email: [e-mail]
    
    
    

Hint

Use a <style> block inside <head> to style the body with Flexbox and font size. Add a <footer> with aria-label="Footer" for screen readers.

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