CSS Icons

Icons help clarify content for users and reduce the amount of text needed. Vector icons are scalable and can be styled exactly like text using CSS (change color, size, shadows, etc.).

How to Add Icons

The standard way to add icons is by linking an external icon library's stylesheet to your HTML's <head> and using an <i> or <span> element with specific class names.

1. Font Awesome Icons

Font Awesome is the most popular icon library. It provides thousands of free and premium icons.

<!-- Include in Head -->
<link rel="stylesheet" href="font-awesome.min.css">

<!-- Use in HTML -->
<i class="fa fa-home"></i>
<i class="fa fa-heart"></i>

2. Styling Icons with CSS

Since icon libraries are built as font icons, you can treat them as text in your CSS. You can change their color, size, and add shadows.

i {
    font-size: 50px;
    color: #2e7d52;
}

i:hover {
    color: red;
    text-shadow: 2px 2px 4px #aaa;
}

3. Bootstrap Icons

Bootstrap has its own extensive icon library designed to integrate perfectly with Bootstrap components.

<i class="bi bi-alarm"></i>
<i class="bi bi-trash"></i>

Using Vector SVG Icons

For more control and performance, developers often use SVG icons. Unlike font icons, SVGs are highly customizable and can be manipulated using CSS properties like fill and stroke.

<svg fill="#2e7d52" width="50" height="50">
    <circle cx="25" cy="25" r="20" />
</svg>

Tip: Always include an aria-hidden="true" attribute to icons that are purely decorative, so screen readers ignore them.

« Previous Lesson Next Lesson »