Icon sizing and colors in Bootsrap - Performance & Optimization

Performance: Icon sizing and colors

MEDIUM IMPACT

This affects page load speed and rendering performance by impacting CSS complexity and paint times when icons are resized or recolored inefficiently.

Changing icon size and color on a webpage

Bootsrap

<i class="bi bi-star fs-3 text-danger"></i>

Using Bootstrap utility classes for font size and color leverages CSS caching and avoids inline style recalculations.

📈 Performance GainSingle style recalculation for all icons sharing classes; reduces reflows and paints significantly.

Changing icon size and color on a webpage

Bootsrap

<i class="bi bi-star" style="font-size: 50px; color: #ff0000;"></i>

Inline styles with fixed font size and color force layout recalculation and repaint for each icon, increasing reflows and paint cost.

📉 Performance CostTriggers 1 reflow and 1 paint per icon; scales poorly with many icons.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline styles for icon size and color	Minimal DOM nodes	Triggers 1 reflow per icon	High paint cost due to unique styles	[X] Bad
Bootstrap utility classes for size and color	Minimal DOM nodes	Single reflow for all icons	Low paint cost due to shared styles	[OK] Good

Rendering Pipeline

Icon sizing and color changes affect the Style Calculation and Paint stages. Inline styles cause repeated recalculations and repaints, while CSS classes allow batch processing.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckPaint stage is most expensive due to repeated repaints when inline styles differ per icon.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by impacting CSS complexity and paint times when icons are resized or recolored inefficiently.

Optimization Tips

1Use CSS classes for icon sizing instead of inline styles.

2Apply color changes with utility classes to share styles.

3Avoid fixed width/height inline styles to reduce reflows and repaints.

Performance Quiz - 3 Questions

Which approach reduces reflows when changing icon sizes?

A Applying inline styles for each icon

B Setting size via JavaScript on each icon individually

C Using CSS classes for sizing

D Using images instead of icons

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while loading or interacting with icons, then analyze style recalculations and paint events.

What to look for: Look for repeated style recalculations and paint events for icons; fewer and batched events indicate better performance.

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