Icon sizing and colors in Bootsrap

Introduction

Icons help users understand actions quickly. Changing their size and color makes them fit well in your design and stand out when needed.

You want a small icon next to text to save space.

You need a big icon to highlight an important button.

You want to match icon colors to your website theme.

You want to show different icon colors for different statuses, like green for success or red for error.

Syntax

Bootsrap

<i class="bi bi-icon-name fs-1 text-primary"></i>

bi-icon-name is the icon's name from Bootstrap Icons.

fs-1 sets the font size (icon size) using Bootstrap's size classes.

text-primary sets the icon color using Bootstrap's text color classes.

Examples

This shows an alarm icon with medium size and red color.

Bootsrap

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

This shows a large check circle icon in green color.

Bootsrap

<i class="bi bi-check-circle fs-1 text-success"></i>

This shows a smaller star icon in yellow color.

Bootsrap

<i class="bi bi-star fs-5 text-warning"></i>

Sample Program

This page shows four icons with different sizes and colors. The sizes come from Bootstrap's fs-* classes, and colors come from text-* classes. Each icon has an accessible label for screen readers.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Icon Sizes and Colors</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
</head>
<body>
  <main class="p-4">
    <section>
      <h1>Icon Sizes and Colors</h1>
      <p>Here are some icons with different sizes and colors using Bootstrap classes:</p>
      <div class="d-flex gap-4 align-items-center">
        <i class="bi bi-heart fs-1 text-danger" aria-label="Large red heart icon" role="img"></i>
        <i class="bi bi-star fs-3 text-warning" aria-label="Medium yellow star icon" role="img"></i>
        <i class="bi bi-moon fs-5 text-primary" aria-label="Small blue moon icon" role="img"></i>
        <i class="bi bi-lightning fs-2 text-success" aria-label="Medium green lightning icon" role="img"></i>
      </div>
    </section>
  </main>
</body>
</html>

Important Notes

Use fs-1 to fs-6 for font sizes from largest to smallest.

Use Bootstrap text color classes like text-primary, text-danger, text-success, text-warning to change icon colors easily.

Always add aria-label and role="img" for better accessibility.

Summary

Bootstrap icons size is controlled by fs-* classes.

Icon colors come from Bootstrap's text color classes.

Use accessible labels to help all users understand icons.

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