Icons Font Awesome
Font Awesome is one of the most widely used icon libraries on the web, loaded through a CDN link or a personal kit script and used with fa-solid, fa-regular, or fa-brands classes.
What Is Font Awesome?
Font Awesome is a large icon library that has been a staple of web development for years. Version 6, the current major version, organizes its icons into styles - solid, regular, and brands - each with its own CSS class prefix, plus paid styles like light and duotone available to Pro subscribers.
Two Ways to Load Font Awesome
The simplest option is a CDN stylesheet link, which works for the free icon set with no account needed. The alternative is a personal "kit" - a single <script> tag tied to your Font Awesome account that can be configured from a dashboard and also unlocks Pro icons if you subscribe.
Example
<!DOCTYPE html>
<html>
<head>
<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>
<i class="fa-regular fa-star"></i>
<i class="fa-brands fa-github"></i>
</body>
</html>Notice that every icon needs two classes: a style class (fa-solid, fa-regular, or fa-brands) and an icon name class (fa-star, fa-github). The style class is what actually loads the font family and weight; the name class picks the glyph.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a2f1c3d4e5.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fa-solid fa-heart"></i>
</body>
</html>Handy Utility Classes
- fa-lg, fa-xl, fa-2xl - quick relative size steps.
- fa-spin - continuously rotates the icon, useful for loading indicators.
- fa-beat, fa-bounce - built-in attention-grabbing animations.
Exercise: Icons Font Awesome
Which class style is used to display a brand logo icon, like Twitter or GitHub, in Font Awesome?
