Bootstrap Icons library setup - Performance & Optimization

Performance: Bootstrap Icons library setup

MEDIUM IMPACT

This affects page load speed and rendering performance by adding external icon assets and CSS to the page.

Adding icons to a webpage using Bootstrap Icons

Bootsrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"></noscript>
<i class="bi bi-alarm"></i>

Defers CSS loading to after initial render using media attribute and onload, reducing render-blocking time.

📈 Performance GainReduces render-blocking CSS impact, improves LCP by 100-150ms

Adding icons to a webpage using Bootstrap Icons

Bootsrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<i class="bi bi-alarm"></i>
<i class="bi bi-battery"></i>
<i class="bi bi-calendar"></i>

Loading the full Bootstrap Icons CSS file loads all icons even if only a few are used, increasing CSS size and blocking rendering.

📉 Performance CostAdds ~150kb CSS file, blocks rendering until CSS loads, increases LCP by 200-300ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full Bootstrap Icons CSS loaded normally	Minimal DOM nodes	1 reflow after CSS load	High paint cost due to delayed styles	[X] Bad
Bootstrap Icons CSS deferred with media=print and onload	Minimal DOM nodes	1 reflow after CSS load	Moderate paint cost, faster initial render	[!] OK
Inline SVG icons only	Slightly more DOM nodes	No reflows from CSS load	Low paint cost, immediate icon rendering	[OK] Good

Rendering Pipeline

The browser must download and parse the Bootstrap Icons CSS before it can render icons styled with the icon classes. This CSS is render-blocking and delays the Style Calculation and Layout stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS file blocking rendering

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by adding external icon assets and CSS to the page.

Optimization Tips

1Avoid loading the entire Bootstrap Icons CSS if you use only a few icons.

2Defer icon CSS loading using media attributes and onload to reduce render-blocking.

3Use inline SVG icons for best performance when only a few icons are needed.

Performance Quiz - 3 Questions

What is the main performance drawback of loading the full Bootstrap Icons CSS file on page load?

A It blocks rendering until the CSS file is downloaded and parsed

B It increases the number of DOM nodes significantly

C It causes JavaScript errors if icons are missing

D It disables browser caching

DevTools: Performance

How to check: Open DevTools > Performance tab > Record page load > Look for long tasks blocking main thread and CSS loading times

What to look for: Look for CSS file download blocking style calculation and delayed first paint; check LCP timing for icon load impact

Practice

1. What is the correct way to add Bootstrap Icons to your webpage?

easy

A. Include the Bootstrap Icons CSS link in the <head> section of your HTML.

B. Add a JavaScript file for Bootstrap Icons in the <body> section.

C. Use an <img> tag with the icon URL directly in the HTML.

D. Write icon names inside a <div> without any CSS or JS.

Solution

1. Step 1: Understand how Bootstrap Icons are loaded

   Bootstrap Icons are provided as a CSS library, so you need to link their CSS file in your HTML head.

2. Step 2: Identify the correct HTML placement

   The CSS link must be inside the <head> tag to load before the page renders.

3. Final Answer:

   Include the Bootstrap Icons CSS link in the <head> section of your HTML. -> Option A

4. Quick Check:

   Bootstrap Icons CSS link in <head> = B [OK]

Hint: Always add CSS links inside the <head> for proper loading [OK]

Common Mistakes:

• Adding CSS link inside <body>
• Using JavaScript file instead of CSS
• Trying to use icons without linking CSS

2. Which of the following is the correct syntax to display a Bootstrap icon for a house?

easy

A. <span class='icon-house'></span>

B. <icon name='house'></icon>

C. <i class='bi bi-house'></i>

D. <img src='house.svg' class='bi'>

Solution

1. Step 1: Recall Bootstrap Icons usage

   Bootstrap Icons use <i> tags with classes starting with bi and the icon name.

2. Step 2: Match the correct class format

   The correct class for the house icon is bi bi-house, used inside an <i> tag.

3. Final Answer:

   <i class='bi bi-house'></i> -> Option C

4. Quick Check:

   Use <i> with bi bi-iconname classes = C [OK]

Hint: Use <i> tag with 'bi bi-iconname' classes for icons [OK]

Common Mistakes:

• Using <icon> tag which doesn't exist
• Using <span> without correct classes
• Using <img> instead of icon classes

3. What will be the visual result of this HTML snippet after adding Bootstrap Icons CSS?

<i class='bi bi-alarm'></i>

medium

A. A broken image icon appears.

B. The text 'bi bi-alarm' is shown as plain text.

C. An empty space appears with no icon or text.

D. A clock alarm icon appears on the page.

Solution

1. Step 1: Understand icon rendering with Bootstrap Icons

   When the CSS is linked, the <i> tag with classes bi bi-alarm shows the alarm clock icon.

2. Step 2: Predict the visual output

   The icon appears as a small vector image representing an alarm clock, not text or empty space.

3. Final Answer:

   A clock alarm icon appears on the page. -> Option D

4. Quick Check:

   Bootstrap icon class renders icon = D [OK]

Hint: Icon classes show icons, not text or empty space [OK]

Common Mistakes:

• Expecting text instead of icon
• Not linking CSS so icon doesn't show
• Confusing icon with image tag behavior

4. You added this code to your HTML:

<i class='bi bi-camera'></i>

But the icon does not appear. What is the most likely reason?

medium

A. You forgot to include the Bootstrap Icons CSS link in the <head>.

B. The <i> tag is not supported in HTML5.

C. The class name should be icon-camera instead of bi bi-camera.

D. You need to add a JavaScript file to load the icon.

Solution

1. Step 1: Check icon setup requirements

   Bootstrap Icons require the CSS file to be linked in the HTML head to display icons.

2. Step 2: Identify common mistakes

   If the CSS is missing, the icon classes won't work and no icon appears.

3. Final Answer:

   You forgot to include the Bootstrap Icons CSS link in the <head>. -> Option A

4. Quick Check:

   Missing CSS link causes icons not to show = A [OK]

Hint: Always check CSS link if icons don't appear [OK]

Common Mistakes:

• Thinking <i> tag is obsolete
• Using wrong class names
• Expecting JavaScript to load icons

5. You want to add a clickable button with a Bootstrap icon for 'search' that is accessible and responsive. Which code snippet is best?

hard

A. <div class='btn btn-primary'><i class='bi bi-search'></i></div>

B. <button aria-label='Search' class='btn btn-primary'><i class='bi bi-search'></i> Search</button>

C. <button class='btn btn-primary'><img src='search.svg' alt='Search icon'></button>

D. <button class='btn btn-primary'><i class='icon-search'></i></button>

Solution

1. Step 1: Ensure semantic and accessible button

   Use a <button> element with an aria-label for screen readers.

2. Step 2: Use correct Bootstrap icon classes and button styling

   Include <i class='bi bi-search'></i> inside the button and add Bootstrap button classes for styling.

3. Step 3: Confirm responsiveness and accessibility

   Adding text 'Search' with the icon helps all users, and aria-label improves screen reader clarity.

4. Final Answer:

   <button aria-label='Search' class='btn btn-primary'><i class='bi bi-search'></i> Search</button> -> Option B

5. Quick Check:

   Accessible button with icon and label = A [OK]

Hint: Use <button> with aria-label and correct icon classes [OK]

Common Mistakes:

• Using <div> instead of <button> for clickable elements
• Missing aria-label for accessibility
• Using wrong icon class names