Font Awesome Icons

By the end, you can add Font Awesome icons to a page with a CDN stylesheet, choose icons with CSS classes, and style them like text.

What it is

Font Awesome is an icon font library that provides symbols such as stars, hearts, arrows, and logos. In CSS, it often works like a special font: a stylesheet loads the font and defines classes, and each class selects a glyph. You usually add an empty element such as <i> or <span> and give it classes like fa-solid fa-star. Related terms include CDN, icon class, font-family, and accessibility text.

Why it matters

• Icons scale cleanly because font-size controls them like text.
• Icons can be recolored with CSS color.
• Adding or replacing an icon is often just a class change.
• A shared icon set keeps buttons, menus, and ratings consistent.

Syntax or steps

1. Add the Font Awesome stylesheet inside <head>.
2. Create an empty element for the icon, commonly <i>.
3. Add a style class and an icon class, such as fa-solid fa-star.
4. Use CSS to set font-size, color, and spacing.
5. If the icon is decorative, use aria-hidden="true" and provide meaningful text nearby.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Awesome Icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    .rating { font-size: 2rem; color: #f59e0b; }
    .rating i { margin-right: 0.25rem; }
  </style>
</head>
<body>
  <p class="rating">
    <i class="fa-solid fa-star" aria-hidden="true"></i>
    <i class="fa-solid fa-star" aria-hidden="true"></i>
    <i class="fa-solid fa-star" aria-hidden="true"></i>
    <i class="fa-regular fa-star" aria-hidden="true"></i>
    <i class="fa-regular fa-star" aria-hidden="true"></i>
    <span>3 out of 5 stars</span>
  </p>
</body>
</html>

The <link> loads the Font Awesome CSS and font files. The .rating rule sets size and color, which the icons inherit. Each <i> is empty; the classes choose the star glyph and style. The visible <span> gives the rating as text.

Common mistakes

• Forgetting the stylesheet. If the CSS is not loaded, the classes do nothing. Check the <link> URL and placement.
• Using an incomplete class. In Font Awesome 6, explicit style prefixes such as fa-solid, fa-regular, or fa-brands are clearer than older aliases.
• Styling icons like images. Use font-size as the main size control, not width and height.

When to use it

Font Awesome is best for common interface icons. If you need a custom logo, exact pixel control, or only one icon, inline SVG or an image may be better.

Practice

Guided exercise: Add a heart icon to a button and make it red. Use <button><i class="fa-solid fa-heart" aria-hidden="true"></i> Save</button> and CSS such as .fa-heart { color: crimson; }. Expected result: a red heart appears before Save.

Challenge: Create a 4-star rating with four solid stars and one regular star. Hint: repeat <i> elements and add text such as 4 out of 5 stars.

Quick check

Question: Why does font-size usually control a Font Awesome icon better than width?

Answer: Because the icon is rendered as a glyph in a font, so it scales like text.

Summary

Font Awesome turns icons into CSS-styled text glyphs. Load the stylesheet, add an empty element with the right classes, and style it with font-size and color. Use it for quick, consistent UI icons, and provide accessible text when the icon has meaning.