Chapter 3: Font Awesome 5
First — What exactly is Font Awesome 5?
Font Awesome is the world’s most popular icon library for websites and apps. It’s a huge collection of vector icons (scalable, sharp at any size) that you add to HTML/CSS/JS projects super easily — like hearts ❤️, houses 🏠, shopping carts 🛒, social media logos, arrows, loading spinners, etc.
Font Awesome 5 (often called FA5) was the major fifth version, released around late 2017 after a famous Kickstarter campaign that raised over $1 million. It was a big upgrade from Font Awesome 4 (which used just one style and fewer icons).
Key point in 2026: FA5 is now old but still very widely used — especially in older projects, WordPress themes, Bootstrap sites, admin panels, and tutorials (like W3Schools still has a whole FA5 section). The current latest is Font Awesome 7 (as of Feb 2026), but millions of sites still run FA5 happily.
Main Features That Made Font Awesome 5 Revolutionary (Compared to FA4)
-
Multiple Styles (biggest change!)
- Solid (filled, bold) → prefix: fas
- Regular (outline, lighter) → prefix: far
- Light (even thinner outline) → prefix: fal (Pro only)
- Duotone (two-color icons) → prefix: fad (Pro only)
- Brands (Facebook, Twitter/X, Instagram logos etc.) → prefix: fab
In FA4 everything was just fa — no styles separated like this.
-
Way More Icons
- Free edition: ~1,588 icons (Solid + Brands + some Regular)
- Pro edition: ~7,842 icons (adds Light, Duotone, many more in all styles)
-
Better Ways to Use It
- Web Fonts (classic CSS way)
- SVG + JS (new in FA5 — sharper, smaller file size, easier to color/style)
- Official React, Angular, Vue components
- Desktop fonts with ligatures (type 🙂 and it becomes 😊)
-
Naming Changes Many icons got renamed for consistency (e.g., fa-envelope-o → fa-envelope in Regular style)
How to Actually Use Font Awesome 5 in 2026 (Even Though It’s Old)
Two easiest ways — both still work perfectly.
Method 1: CDN (Fastest for Beginners)
Paste this in <head> of your HTML:
|
0 1 2 3 4 5 6 7 |
<!-- Font Awesome 5 Free (latest patch: 5.15.4) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> |
Now add icons anywhere:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- Solid heart (filled red) --> <i class="fas fa-heart" style="color: red; font-size: 2rem;"></i> <!-- Outline home --> <i class="far fa-home"></i> Home <!-- Twitter/X brand logo --> <i class="fab fa-twitter"></i> Follow us <!-- Big spinning loader --> <i class="fas fa-spinner fa-spin fa-3x"></i> |
Method 2: Kit (Recommended by Font Awesome – even for v5)
Go to fontawesome.com → sign up free → create a Kit → get a code like:
|
0 1 2 3 4 5 6 |
<script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script> |
This loads only the icons you use (smaller & faster). You can still use FA5 icons in Kits.
Real-World Examples You See Everywhere (FA5 Style)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- Classic navbar (many Bootstrap 4/5 sites still use this) --> <nav> <a href="/" class="active"> <i class="fas fa-home"></i> Home </a> <a href="/profile"> <i class="fas fa-user"></i> Profile </a> <a href="/notifications"> <i class="fas fa-bell"></i> Notifications <span class="badge">3</span> </a> </nav> <!-- Like / Comment / Share (very common in 2018–2022 social clones) --> <div class="post-actions"> <i class="far fa-heart"></i> Like <i class="far fa-comment"></i> Comment <i class="far fa-share-square"></i> Share </div> <!-- Delete button with trash --> <button class="btn btn-danger"> <i class="fas fa-trash-alt"></i> Delete Account </button> |
Font Awesome 5 vs Newer Versions (Quick Teacher Comparison – 2026 View)
| Feature | Font Awesome 5 (2017–2021) | Font Awesome 6 / 7 (2022–2026) | Notes for You |
|---|---|---|---|
| Free Icons | ~1,588 | ~2,000+ (doubled in 6) | FA6/7 has many more free ones |
| Styles (Free) | Solid + Brands + limited Regular | Solid + Brands + more Regular + Thin | Thin is new & beautiful |
| Pro Extras | Light, Duotone | + Sharp family, more categories | Sharp = modern filled look |
| Performance | Good (SVG+JS improved) | Better (smaller files, Brotli) | FA5 still fine for most sites |
| Backward Compatibility | — | Very good – auto-translates FA5 names | Easy upgrade path |
| Current Status | LTS (Long Term Support) – security patches only | Actively developed – new icons monthly | Use 5 if legacy project |
Many big sites (old dashboards, themes) still stick with FA5 because “if it works, don’t fix it”.
Summary in Simple Words
- Font Awesome 5 = the version that made icons “grow up” — introduced styles (solid/regular/brands), tons more icons, SVG support, and became the standard for 2018–2022 web design.
- Free forever, easy CDN, still powers millions of sites in 2026.
- If you’re learning now → start with FA6 or FA7 (more icons, backward compatible).
- But if you open old code / W3Schools FA5 tutorial / legacy project → that’s why you see fas, far, fab everywhere.
Got questions, student? Want me to show:
- Full small webpage with FA5 navbar + cards?
- How to migrate old FA5 code to FA7?
- Difference in look between solid vs regular home icon?
- Or why some people still prefer FA5 in 2026?
Just ask — class is open! 🏠🔥🚀
