Icon sizing and colors in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What class in Bootstrap controls the size of icons?

Bootstrap uses classes like fs-1 to fs-6 to control font size, which affects icon size when using icon fonts or SVG icons.

beginner

How do you change the color of an icon in Bootstrap?

You can change icon color by applying Bootstrap text color utility classes like text-primary, text-success, or custom CSS color styles.

beginner

What does the Bootstrap class text-muted do to an icon?

The <code>text-muted</code> class applies a lighter gray color to the icon, making it appear less prominent.

beginner

How can you make an icon larger than the default size using Bootstrap?

Use a larger font size class like <code>fs-1</code> or <code>fs-2</code> on the icon element to increase its size.

intermediate

Why is it important to use semantic colors and sizes for icons in web design?

Using semantic colors and sizes helps users understand the meaning and importance of icons, improves accessibility, and creates a consistent look.

Which Bootstrap class would you use to make an icon smaller?

A text-primary

B fs-1

C text-muted

D fs-6

The class fs-6 sets the font size smaller, which makes the icon smaller.

How do you apply a red color to an icon using Bootstrap classes?

A fs-3

B bg-danger

C text-danger

D text-muted

The text-danger class applies a red color to text or icons.

What is the effect of the text-muted class on an icon?

A Makes the icon lighter gray

B Makes the icon bold

C Increases icon size

D Changes icon to red

The text-muted class makes the icon color a lighter gray.

Which class would you use to make an icon very large?

A text-muted

B fs-1

C text-primary

D fs-5

The fs-1 class sets the font size to the largest predefined size.

Why should icon colors be chosen carefully in web design?

A To improve user understanding and accessibility

B To make icons flash

C To increase page load speed

D To hide icons from screen readers

Choosing colors carefully helps users understand icons and improves accessibility.

Explain how to change the size and color of an icon using Bootstrap classes.

Think about font size and text color utilities.

Why is it important to use semantic colors and sizes for icons in your web projects?

Consider how users perceive icons and their meaning.

Practice

1. Which Bootstrap class controls the size of an icon?

easy

A. fs-* classes

B. icon-size-* classes

C. size-icon-* classes

D. icon-fs-* classes

Solution

1. Step 1: Understand Bootstrap icon sizing

   Bootstrap uses fs-* classes to control font size, which affects icon size.

2. Step 2: Identify correct class pattern

   The correct pattern is fs-*, where * is a number like 1, 2, 3, etc.

3. Final Answer:

   <code>fs-*</code> classes -> Option A

4. Quick Check:

   Icon size = fs-* classes [OK]

Hint: Remember: fs-* means font size in Bootstrap [OK]

Common Mistakes:

• Confusing icon size classes with color classes
• Using non-existent class names like icon-size-*
• Thinking size is controlled by icon-fs-*

2. Which class would you use to make a Bootstrap icon have a medium font size?

easy

A. fs-6

B. fs-1

C. fs-3

D. fs-0

Solution

1. Step 1: Recall Bootstrap font size scale

   Bootstrap font sizes range from fs-1 (largest) to fs-6 (smallest).

2. Step 2: Identify medium size

   fs-3 is roughly in the middle, so it represents medium size.

3. Final Answer:

   fs-3 -> Option C

4. Quick Check:

   Medium size = fs-3 [OK]

Hint: fs-1 is largest, fs-6 smallest; middle is fs-3 [OK]

Common Mistakes:

• Choosing fs-1 thinking it's medium
• Using fs-0 which does not exist
• Confusing fs-6 as medium size

3. What color will the icon have with this class: text-danger?

medium

A. Red

B. Blue

C. Green

D. Gray

Solution

1. Step 1: Understand Bootstrap text color classes

   Bootstrap uses semantic color classes like text-danger for red color.

2. Step 2: Match class to color

   text-danger applies a red color to text or icons.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   text-danger = red color [OK]

Hint: Danger means red in Bootstrap colors [OK]

Common Mistakes:

• Thinking text-danger is blue
• Confusing text-success with text-danger
• Assuming text-danger is gray

4. You want a large green icon but your code is: <i class='bi bi-check fs-1 text-successs'></i>. What is the problem?

medium

A. fs-1 is not a valid size class

B. Wrong icon name bi-check

C. Missing aria-label attribute

D. Misspelled color class text-successs

Solution

1. Step 1: Check class names for typos

   The color class text-successs has an extra 's' and is invalid.

2. Step 2: Confirm other classes

   bi-check is a valid icon, fs-1 is valid for large size, aria-label is optional but recommended.

3. Final Answer:

   Misspelled color class <code>text-successs</code> -> Option D

4. Quick Check:

   Check spelling of color classes [OK]

Hint: Check spelling of Bootstrap classes carefully [OK]

Common Mistakes:

• Ignoring typos in class names
• Assuming fs-1 is invalid
• Forgetting aria-label but thinking it's an error

5. You want to create a blue icon with medium size and accessible label "Info icon". Which code is correct?

hard

A. <i class='bi bi-info-circle fs-5 text-info' aria-label='Info icon'></i>

B. <i class='bi bi-info-circle fs-3 text-primary' aria-label='Info icon'></i>

C. <i class='bi bi-info fs-3 text-primary' aria-hidden='true'></i>

D. <i class='bi-info-circle fs-3 text-primary' aria-label='Info icon'></i>

Solution

1. Step 1: Check icon name and size

   bi-info-circle is correct icon name; fs-3 is medium size.

2. Step 2: Verify color and accessibility

   text-primary is blue color; aria-label='Info icon' provides accessible label.

3. Step 3: Review other options

   <i class='bi bi-info-circle fs-5 text-info' aria-label='Info icon'></i> uses fs-5 (small size) and text-info (lighter blue). <i class='bi bi-info fs-3 text-primary' aria-hidden='true'></i> misses accessible label and uses aria-hidden. <i class='bi-info-circle fs-3 text-primary' aria-label='Info icon'></i> misses bi class prefix.

4. Final Answer:

   <i class='bi bi-info-circle fs-3 text-primary' aria-label='Info icon'></i> -> Option B

5. Quick Check:

   Correct icon, size, color, and aria-label [OK]

Hint: Use bi + fs-* + text-* + aria-label for accessible icons [OK]

Common Mistakes:

• Missing bi prefix on icon class
• Using wrong size or color classes
• Forgetting aria-label for accessibility