Icon font usage in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap icon for a house.

Bootsrap

<i class="bi bi-[1]"></i>

Drag options to blanks, or click blank then click option'

Ahouse

Bcard

Cbutton

Dalert

Attempts:

3 left

💡 Hint

Common Mistakes

Using component names like 'button' or 'card' instead of icon names.

Forgetting the 'bi-' prefix in the class.

The class bi-house adds the house icon from Bootstrap Icons.

2fill in blank

medium

Complete the code to add a Bootstrap icon for a search magnifying glass.

Bootsrap

<i class="bi bi-[1]"></i>

Drag options to blanks, or click blank then click option'

Acamera

Bstar

Cbell

Dsearch

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing unrelated icons like 'camera' or 'bell'.

Misspelling the icon name.

The class bi-search adds the magnifying glass search icon.

3fill in blank

hard

Fix the error in the code to correctly display a Bootstrap icon for a heart.

Bootsrap

<i class="bi [1]"></i>

Drag options to blanks, or click blank then click option'

Abi-heart

Bheart

Cbiheart

Dicon-heart

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the 'bi-' prefix.

Using incorrect class names like 'icon-heart'.

The correct class for the heart icon is bi-heart. It must include the 'bi-' prefix.

4fill in blank

hard

Fill both blanks to create a large red Bootstrap icon for a star.

Bootsrap

<i class="bi bi-[1] text-[2] fs-[3]"></i>

Drag options to blanks, or click blank then click option'

Astar

Bprimary

Cdanger

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong color classes like 'primary' for red.

Forgetting the 'bi-' prefix in the icon class.

Using invalid size numbers.

The icon class is bi-star. The color class text-danger makes it red. The size class fs-3 makes it large.

5fill in blank

hard

Fill all three blanks to create a Bootstrap icon for a bell with a blue color and medium size.

Bootsrap

<i class="bi bi-[1] text-[2] fs-[3]"></i>

Drag options to blanks, or click blank then click option'

Abell

Bprimary

C4

Dalarm

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alarm' instead of 'bell' for the icon name.

Using wrong color classes like 'danger' for blue.

Choosing size numbers outside 1 to 6.

The icon class is bi-bell. The color class text-primary makes it blue. The size class fs-4 sets a medium size.

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