Icon font usage in Bootsrap - Browser Rendering Trace

Render Flow - Icon font usage

[Load HTML] -> [Load CSS including icon font styles] -> [Load icon font files (woff, ttf)] -> [Parse icon class names] -> [Replace icon elements with font glyphs] -> [Render text with icon font glyphs] -> [Paint icons on screen]

The browser loads the HTML and CSS, including styles for icon fonts. It fetches the font files, then replaces elements with icon classes by rendering the corresponding font glyphs as icons.

Render Steps - 4 Steps

Code Added:<i class="bi bi-alarm" aria-hidden="true"></i>

Before

[ ] (empty page)

→

After

[ ☐ ] (empty square placeholder for icon)

Adding the <i> element with icon classes creates a placeholder where the icon font glyph will appear.

🔧 Browser Action:Creates DOM node and applies CSS classes

Code Sample

This code shows a Bootstrap icon font alarm icon rendered as a font glyph inside an <i> element with accessible hidden text.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  <title>Icon Font Example</title>
</head>
<body>
  <i class="bi bi-alarm" aria-hidden="true"></i>
  <span class="visually-hidden">Alarm icon</span>
</body>
</html>

Bootsrap

/* Bootstrap Icons CSS loaded from CDN includes font-face and icon classes */
.bi {
  font-family: 'Bootstrap Icons';
  font-style: normal;
  font-weight: 400;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  vertical-align: -.125em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bi-alarm::before {
  content: "\f101";
}

Render Quiz - 3 Questions

After applying step 2, what do you see on the page?

A An alarm clock icon glyph

B An empty square placeholder

C No visible content

D Text 'bi bi-alarm'

Common Confusions - 3 Topics

Why does my icon show as a square or empty box instead of the icon?

This happens if the icon font file did not load or the font-family is not applied correctly. The browser shows a fallback empty box for missing glyphs. Check your CSS link and font-family property (see render_steps 2).

💡 If you see a square instead of an icon, the font is missing or not applied.

Why can't screen readers read my icon?

Icon fonts are decorative and screen readers ignore them if aria-hidden="true" is set. To make icons accessible, add a visually hidden text label next to the icon (see render_steps 4).

💡 Add hidden text for screen readers to describe icons.

Why does the icon not align well with my text?

Icon fonts behave like text but vertical alignment can differ. Use vertical-align CSS (like vertical-align: -.125em) on the icon class to align it properly with text baseline (see CSS in code_sample).

💡 Adjust vertical-align to align icons with text.

Property Reference

Property	Value Applied	Visual Effect	Common Use
font-family	'Bootstrap Icons'	Replaces text with icon font glyphs	Display icon fonts
content	"\f101"	Inserts specific icon glyph via pseudo-element	Show specific icon
display	inline-block	Allows icon to behave like text but accept box properties	Icon sizing and alignment
aria-hidden	true	Hides icon from screen readers	Decorative icons
visually-hidden class	CSS to hide visually but keep accessible	Provides accessible text for screen readers	Accessibility

Concept Snapshot

Icon fonts use special fonts where characters are icons. Use CSS font-family to apply the icon font. Use ::before with content property to show specific icons. Add aria-hidden="true" to hide icons from screen readers. Add visually hidden text for accessibility. Icons behave like text and need vertical alignment.

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