Icon font usage in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an icon font?

An icon font is a special font that contains symbols or icons instead of letters. You can use it like text to show icons on a webpage.

beginner

How do you include Bootstrap Icons in your project?

You add a link to the Bootstrap Icons CSS file in your HTML <head>. For example: <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"/>

beginner

How do you display a Bootstrap icon in HTML?

Use an <i> or <span> tag with the class for the icon. For example: &lt;i class="bi bi-alarm"&gt;&lt;/i&gt; shows an alarm icon.

intermediate

Why use icon fonts instead of images?

Icon fonts scale well on all screen sizes, load fast, and can be styled with CSS colors and sizes easily, unlike images.

beginner

How can you change the size and color of a Bootstrap icon?

Use CSS properties like font-size and color on the icon element. For example: <i class="bi bi-alarm" style="font-size: 2rem; color: red;"></i>

How do you add Bootstrap Icons to your webpage?

A Use &lt;svg&gt; tags only

B Add a &lt;script&gt; tag for Bootstrap Icons JavaScript

C Download icons as images and use &lt;img&gt; tags

D Add a &lt;link&gt; tag to the Bootstrap Icons CSS in the &lt;head&gt;

Bootstrap Icons are added by linking their CSS file in the <head> section.

Which HTML element is commonly used to show a Bootstrap icon?

A &lt;div&gt;

B &lt;i&gt; or &lt;span&gt;

C &lt;img&gt;

D &lt;button&gt;

Icons are usually shown using <i> or <span> tags with the correct icon class.

What class prefix do Bootstrap Icons use?

A bi-

B fa-

C icon-

D glyph-

Bootstrap Icons use the prefix 'bi-' for their icon classes.

How can you change the color of a Bootstrap icon?

A Change the image file color

B Use the 'background-color' property

C Use the CSS 'color' property on the icon element

D You cannot change icon colors

Icon fonts respond to the CSS 'color' property to change their color.

Why are icon fonts preferred over images for icons?

A They scale well and are easy to style

B They cannot be styled with CSS

C They are slower to load

D They use more bandwidth

Icon fonts scale smoothly and can be styled easily with CSS, unlike images.

Explain how to add and use a Bootstrap icon in a webpage.

Think about linking CSS and using classes on elements.

Describe the benefits of using icon fonts like Bootstrap Icons instead of image icons.

Consider how fonts behave compared to images.

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