Icon font usage in Bootsrap - Performance & Optimization

Performance: Icon font usage

MEDIUM IMPACT

Icon fonts affect page load speed and rendering performance by adding font files and triggering text layout and paint.

Displaying icons on a webpage

Bootsrap

<svg aria-hidden="true" focusable="false" width="1em" height="1em" viewBox="0 0 16 16">
  <path d="M8 0L16 16H0L8 0z" fill="currentColor"/>
</svg>

SVG icons load inline or as small files, avoid font file download, and paint as vector graphics without text layout.

📈 Performance GainNon-blocking load; reduces layout thrashing; faster first paint

Displaying icons on a webpage

Bootsrap

<link rel="stylesheet" href="https://cdn.example.com/iconfont.css">
<i class="icon-home"></i>

Loads a large icon font file that blocks rendering until downloaded and parsed; icons render as text triggering layout and paint.

📉 Performance CostBlocks rendering for 50-150ms depending on network; triggers text layout and paint for each icon

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Icon font usage	Minimal DOM nodes	Triggers reflow per icon due to text layout	Medium paint cost for text glyphs	[!] OK
Inline SVG icons	Minimal DOM nodes	No reflow from font layout	Low paint cost with vector graphics	[OK] Good

Rendering Pipeline

Icon fonts require the browser to download font files, parse CSS, then layout text glyphs for icons, triggering layout and paint stages.

→Font Loading

→Style Calculation

→Layout

→Paint

⚠️ BottleneckFont Loading and Layout stages are most expensive due to blocking and text glyph layout.

Core Web Vital Affected

LCP

Icon fonts affect page load speed and rendering performance by adding font files and triggering text layout and paint.

Optimization Tips

1Avoid large icon font files that block rendering.

2Use inline SVG icons to reduce layout and paint overhead.

3Check font loading times in DevTools to optimize icon delivery.

Performance Quiz - 3 Questions

What is a main performance drawback of using icon fonts?

A They require downloading a font file that blocks rendering

B They increase the number of DOM nodes significantly

C They cause excessive JavaScript execution

D They prevent CSS from loading

DevTools: Performance

How to check: Record a performance profile while loading the page; look for font loading and layout events related to text rendering.

What to look for: Long font loading times blocking rendering and multiple layout events triggered by icon text elements.

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