Icon font usage in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Rendering a Bootstrap Icon

Which option correctly renders a Bootstrap icon for a house in HTML?

A <icon name="house"></icon>

B <span class="icon-house"></span>

C <i class="bi bi-house"></i>

D <div class="bootstrap-icon-house"></div>

💡 Hint

Bootstrap icons use the bi class prefix followed by the icon name.

The correct way to use a Bootstrap icon is with an <i> or <span> tag and the classes bi and the icon name, e.g., bi-house. Option C uses this correct syntax.

📝 Syntax

intermediate

Correct Class Usage for Bootstrap Icons

Which option uses the correct class attribute to display a Bootstrap 'alarm' icon?

A class="bi bi-alarm"

B class="bi-alarm"

C class="icon-alarm"

D class="bootstrap-alarm"

💡 Hint

Bootstrap icons require both the base class and the specific icon class.

Bootstrap icons require two classes: bi as the base class and bi-alarm for the specific icon. Option A correctly includes both.

❓ accessibility

advanced

Making Bootstrap Icons Accessible

Which option correctly adds accessibility features to a Bootstrap icon used as a button?

Bootsrap

<button type="button">[icon here]</button>

A <button type="button"><i class="bi bi-search" title="Search"></i></button>

B <button type="button"><i class="bi bi-search" aria-hidden="true"></i></button>

C <button type="button"><i class="bi bi-search" role="img" aria-label="Search icon"></i></button>

D <button type="button" aria-label="Search"><i class="bi bi-search"></i></button>

💡 Hint

Buttons should have an accessible name describing their action.

Option D adds an aria-label to the button element, giving screen readers a clear description of the button's purpose. This is the best practice for accessibility.

❓ layout

advanced

Aligning Bootstrap Icons with Text

Which CSS snippet correctly vertically centers a Bootstrap icon next to text inside a button?

Bootsrap

<button class="btn"><i class="bi bi-star"></i> Favorite</button>

A .btn { display: flex; align-items: center; gap: 0.5rem; }

B .btn i { vertical-align: middle; margin-right: 1rem; }

C .btn { text-align: center; } .btn i { float: left; }

D .btn { display: block; } .btn i { line-height: 2rem; }

💡 Hint

Use Flexbox to align items vertically and add spacing.

Option A uses Flexbox with align-items: center to vertically center the icon and text, and gap to add space between them. This is the modern and correct approach.

🧠 Conceptual

expert

Understanding Icon Font Accessibility Impact

What is the main accessibility concern when using icon fonts like Bootstrap Icons without additional markup or attributes?

A Icon fonts increase page load time significantly, affecting accessibility.

B Screen readers may ignore the icon if it lacks descriptive text, causing confusion.

C Icon fonts automatically provide alternative text for screen readers.

D Icon fonts prevent keyboard navigation on the page.

💡 Hint

Think about how screen readers interpret icons without labels.

Icons without descriptive text or ARIA labels are ignored by screen readers, which can confuse users relying on assistive technology. Option B correctly identifies this concern.

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