← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 12 of 20

HTML Icon Fonts

Long before every browser could display crisp vector icons easily, developers found a clever trick: pack a set of icons into a font file, the same way letters are packed into a typeface. Each icon is mapped to a character, so displaying a search icon becomes as simple as writing a single letter in a special font. Icon fonts let you resize, recolor, and style icons using ordinary CSS text properties like font-size and color, without needing separate image files for every icon and every color variation. While SVG icons have become more popular for their sharper detail, icon fonts are still widely used because they are simple to set up and work consistently on devices and connections around the world.

In this page:

  1. What Are Icon Fonts?
  2. Linking an Icon Font Library
  3. Using Icon Classes in HTML
  4. Sizing and Coloring Icons with CSS
  5. Accessibility Considerations for Icon Fonts

What Are Icon Fonts?

An icon font is a typeface where each character maps to a small icon instead of a letter or number. Because icons are just font glyphs, they inherit ordinary text styling like size, color, and shadow. Font Awesome is the most popular icon font library on the web, offering a huge catalog of icons and powering millions of sites.

Note: Icon fonts are a good choice when you need many simple, single-color icons that must resize cleanly at any zoom level.

Warning: Icon fonts render as plain squares or missing-character boxes if their font file fails to load.

Example: What Are Icon Fonts?

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-star"></i>
</body>
</html>

Linking an Icon Font Library

Most icon fonts are distributed as a stylesheet plus one or more font files, similar to a web font. Linking the stylesheet in your document's head makes every icon class available across the page. When choosing a library: Font Awesome is the most popular option with by far the largest icon set, Google's Material Icons follow Google's own Material Design system and suit apps already built around it, and Bootstrap Icons are deliberately lightweight, making them a good fit for projects already using the Bootstrap framework.

Note: Host the icon font files yourself if your site needs to work reliably without depending on a third-party server.

Warning: Loading an icon font library twice on the same page can cause conflicting class names and unexpected icon glyphs.

Example: Linking an Icon Font Library

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-heart"></i>
</body>
</html>

Using Icon Classes in HTML

Icon fonts are usually triggered with a base class plus a specific icon class, applied to an empty inline element. The base class sets up the font family, while the specific class selects which character (icon) to display. Google's Material Icons are drawn directly from Google's Material Design system, making them a natural choice for interfaces that follow Material Design guidance.

Note: Use a semantic wrapping element, like a button or link, around the icon so its purpose is clear even without the icon rendering.

Warning: Adding text content inside the icon element can cause stray letters to appear alongside the icon glyph.

Example: Using Icon Classes in HTML

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <button>
    <i class="fa-solid fa-trash"></i> Delete
  </button>
</body>
</html>

Sizing and Coloring Icons with CSS

Because icon font glyphs are text characters, ordinary CSS properties like font-size and color control how large and what color each icon appears, without needing separate icon image files. Bootstrap Icons are intentionally lightweight, which makes them well suited to projects already using the Bootstrap framework and wanting to avoid pulling in a larger icon library.

Note: Set icon size in em units so icons scale automatically alongside surrounding text.

Warning: Changing color on a parent element can unintentionally recolor every icon nested inside it.

Example: Sizing and Coloring Icons with CSS

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-star" style="font-size: 2em; color: gold;"></i>
</body>
</html>

Accessibility Considerations for Icon Fonts

Since icon fonts render as decorative characters, screen readers may either skip them or read the underlying character incorrectly. Providing a text alternative ensures the icon's meaning is not lost for visitors using assistive technology.

Note: Add aria-hidden=true to purely decorative icons and rely on visible or screen-reader-only text for meaning instead.

Warning: Relying on an icon alone to convey a critical action, like delete or submit, can confuse visitors who cannot see it clearly.

Example: Accessibility Considerations for Icon Fonts

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <style>
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <button>
    <i class="fa-solid fa-trash" aria-hidden="true"></i>
    <span class="sr-only">Delete</span>
  </button>
</body>
</html>
Common Mistakes
  1. Using icon fonts without any accessible text alternative, leaving screen reader users with no idea what the icon represents.
  2. Forgetting to load the icon font's stylesheet, which causes icons to display as empty boxes or missing characters.
  3. Overriding font-family accidentally on a parent element, which breaks every icon nested inside it.
Chapter Summary
  • Icon fonts store icons as characters inside a font file, letting you style them with normal CSS text properties.
  • Icon classes are usually added to an empty <span> or <i> element that loads the correct character from the font.
  • Always pair icon fonts with accessible labels so the icon's meaning is not lost on assistive technology.
Browser Support

Icon fonts rely on standard font-loading and rendering, so they work in every modern browser without extra plugins.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Web Fonts Next Lesson → HTML Progress & Meter

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.