Chapter 80: Font Awesome 4
What is Font Awesome 4
So let’s do this properly — like a real teacher who wants you to understand the full story.
Font Awesome 4 – The Big Picture (in very simple teacher language)
Font Awesome 4 was released in 2014–2015 and for many years (2015–2019) it was the most popular icon library on the entire internet.
It is the version that made Font Awesome famous.
Most people who say “I use Font Awesome on my website” between 2015 and ~2020 were actually using version 4.
Main differences – Font Awesome 4 vs Font Awesome 5 (very clear comparison)
| Feature / Aspect | Font Awesome 4 (2014–2019) | Font Awesome 5 (2017–present) | Winner for most people in 2026? |
|---|---|---|---|
| Number of free icons | ~675 icons | ~1,500–1,600 free icons (much more) | FA5 |
| Styles | Only one style: solid (no outline/regular version in free) | Solid (fas), Regular (far), Brands (fab) | FA5 |
| Prefix | fa for everything | fas, far, fab (brands) | FA5 (more clear) |
| File size (minified CSS) | ~70–80 KB | ~150–180 KB (but you can use separate kits) | FA4 (lighter) |
| Brand icons (social, etc.) | Included in main file (fa) | Separate fab prefix (need extra CSS file) | FA4 easier |
| New icons added after release | Very few updates after 2016 | Still getting new icons in 2026 (v6.6+) | FA5 |
| Animation (spin, pulse) | Yes (fa-spin, fa-pulse) | Yes (same classes) | Equal |
| Modern design | Slightly older look (thicker strokes, less detail) | Much cleaner, thinner, more modern | FA5 |
| CDN usage in 2026 | Still used on millions of old sites | Recommended for new projects | FA5 |
| Official support | No new icons since ~2017 | Actively maintained in 2026 | FA5 |
Key visual differences (very important)
Font Awesome 4 icons generally look thicker, bolder, more “blocky” compared to Font Awesome 5.
Examples side by side (imagine this):
- FA4 → fa-home looks heavier, more square edges
- FA5 → fa-home looks thinner, more elegant, sharper corners
Same with:
- fa-user
- fa-heart
- fa-star
- fa-bell
Most people who upgrade from FA4 to FA5 say: “Wow, everything suddenly looks so much cleaner and more professional.”
How to use Font Awesome 4 today (2026)
Even though it’s old, many legacy sites still use it.
Classic CDN (still works):
HTML
|
0 1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
Basic usage (exactly like FA5, but prefix is always fa):
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<i class="fa fa-home"></i> Home <i class="fa fa-user"></i> Profile <i class="fa fa-heart"></i> Like <i class="fa fa-shopping-cart"></i> Cart <i class="fa fa-facebook"></i> Facebook <i class="fa fa-twitter"></i> Twitter |
No need for fas / far / fab — everything is just fa.
Very common real-life examples (copy-paste ready)
Example 1: Old-school footer social links (FA4 style)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style="text-align:center; padding:40px; background:#222; color:white;"> <a href="#" style="color:white; margin:0 15px; font-size:2.5rem;"> <i class="fa fa-facebook"></i> </a> <a href="#" style="color:white; margin:0 15px; font-size:2.5rem;"> <i class="fa fa-twitter"></i> </a> <a href="#" style="color:white; margin:0 15px; font-size:2.5rem;"> <i class="fa fa-instagram"></i> </a> <a href="#" style="color:white; margin:0 15px; font-size:2.5rem;"> <i class="fa fa-linkedin"></i> </a> </div> |
Example 2: Very typical FA4 navigation bar (2015–2019 style)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<nav style="background:#333; padding:15px; color:white; display:flex; justify-content:space-between;"> <div style="font-size:1.6rem;"> <i class="fa fa-home" style="margin-right:10px;"></i> My Website </div> <div style="display:flex; gap:30px; font-size:1.4rem;"> <a href="#" style="color:white; text-decoration:none;"> <i class="fa fa-user" style="margin-right:6px;"></i> Profile </a> <a href="#" style="color:white; text-decoration:none;"> <i class="fa fa-cog" style="margin-right:6px;"></i> Settings </a> <a href="#" style="color:white; text-decoration:none;"> <i class="fa fa-sign-out" style="margin-right:6px;"></i> Logout </a> </div> </nav> |
Teacher Summary – Quick Facts (February 2026)
| Question | Answer for Font Awesome 4 |
|---|---|
| When was it released? | Mainly 2014–2015 |
| How many free icons? | ~675 |
| Main style? | Only one style (solid) |
| Prefix? | Always fa (no fas/far/fab) |
| Social/brand icons? | Included in main file |
| Still used in 2026? | Yes — millions of old sites, WordPress themes, legacy projects |
| Should new projects use it? | No — use FA6 or FA7 |
| Official support? | No new icons since ~2017 |
Final Teacher Advice (2026)
- If you are maintaining an old website built in 2015–2019 → keep using Font Awesome 4 (it still works perfectly)
- If you are starting a new project in 2026 → use Font Awesome 6 or 7 (free version) → You get 2–3× more icons, modern design, separate brand file, and future updates
Got it now? Want me to:
- Show you a side-by-side visual comparison of FA4 vs FA5 vs FA6 for the same icons?
- Build a classic 2017-style “company footer” using only FA4 icons?
- Give you the exact CDN links for FA4, FA5, and FA6 so you can test yourself?
- Or continue with the next category in our FA5 series?
Just raise your hand — teacher is ready! 📚✨🚀
