CSS Icons
Icon libraries add scalable vector icons to a page through a linked stylesheet and elements with the right classes.
Icons help users scan an interface quickly. Rather than adding image files for each one, most sites use an icon library where the icons are drawn as fonts or vectors, so they stay sharp at any size and can be colored with CSS.
Popular libraries
Adding icons in two steps
- Link the library's stylesheet in the head of your page.
- Add an element, often an i or span, with the class for the icon you want.
The HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="https://cdn.example.com/font-awesome.css">
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>
</body>
</html>Because font icons inherit text styles, you can size and color them with the same properties you use for text.
Styling an icon with CSS
<!DOCTYPE html>
<html>
<head>
<style>
.fa-home {
font-size: 24px;
color: #00643c;
}
</style>
</head>
<body>
<i class="fa fa-home"></i>
</body>
</html>Note: For icons that carry meaning on their own, add an aria-label or accompanying text so screen reader users understand them.
Exercise: CSS Icons
How do you typically make an icon library like Font Awesome available on a page?
