Chapter 81: Font Awesome Introduction
Font Awesome in a very clear, step-by-step way — just like I’m sitting next to you and teaching you personally.
Imagine you’re building a beautiful website or mobile app. You want to show:
- A heart for “like”
- A shopping cart for “add to cart”
- A user/profile icon
- A search magnifying glass
- A trash bin for delete
- Social media logos like Instagram, YouTube, WhatsApp
Do you want to:
- Download 100+ PNG images?
- Create each icon yourself in Figma/Photoshop?
- Use very heavy SVG files everywhere?
No! That’s old-school and painful.
That’s exactly why Font Awesome was invented.
What is Font Awesome? (Simple definition)
Font Awesome is the most popular icon library on the internet.
It is a collection of beautiful, vector-based icons that you can use on websites and apps — and the best part is:
You use them almost like normal text letters (using special font characters), not like separate images.
Because they are a font, you can:
- Change size easily (just like font-size: 50px)
- Change color easily (just like color: red)
- Add shadow, rotate, flip, animate
- Make them sharp on any screen (retina, 4K, mobile)
- Very small file size compared to hundreds of PNG/SVG files
Official tagline (from fontawesome.com): “The internet’s icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.”
Quick history (so you understand why it’s so big)
- 2012 → Dave Gandy created first version (very few icons)
- 2013–2014 → Became super popular (version 4)
- 2017 → Version 5 (big change – added many styles)
- 2022 → Version 6 (Sharp style, Duotone improved)
- 2025–2026 → Version 7 is the latest (released around 2025, now at 7.2 in 2026)
As of 2026, millions of websites use it — it’s the second most used font-related tool after Google Fonts.
How many icons are there? (2026 status)
- Free version → ≈ 1,000–2,000 icons (solid + regular + brands)
- Pro version (paid) → 7,000+ icons + special styles (Sharp, Thin, Duotone, Pro+ packs)
Main Styles in Font Awesome (very important!)
| Style | Prefix | Free? | Looks like | Example use-case |
|---|---|---|---|---|
| Solid | fas | Yes | Filled / bold | Most common icons |
| Regular | far | Yes (limited) | Outline / lighter | Softer look |
| Light | fal | Pro only | Very thin outline | Elegant designs |
| Thin | fat | Pro | Super thin | Minimal designs |
| Duotone | fad | Pro | Two colors | Modern, colorful |
| Sharp Solid | fass | Pro | Sharp edges | Modern, techy feel |
| Brands | fab | Yes | Company logos | Facebook, Twitter/X, YouTube, etc. |
How to use Font Awesome – easiest modern way (2026 method)
- Go to → https://fontawesome.com/start
- Click “Start for Free” (or sign up if you want Pro later)
- Create a Kit (they give you a unique code)
- Copy this code and paste it in <head> of your HTML:
|
0 1 2 3 4 5 6 |
<script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script> |
That’s it — no download needed!
Real examples – let’s see it in action
Example 1: Basic heart + trash icon
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Font Awesome Demo</title> <!-- Paste your Kit code here --> <script src="https://kit.fontawesome.com/abc123def456.js" crossorigin="anonymous"></script> </head> <body> <h2>Like & Delete</h2> <i class="fas fa-heart" style="color: red; font-size: 40px;"></i> <i class="fas fa-trash" style="color: gray; font-size: 40px; margin-left: 30px;"></i> </body> </html> |
Example 2: Button with icon
|
0 1 2 3 4 5 6 7 8 9 |
<button style="padding: 12px 24px; background: #007bff; color: white; border: none; border-radius: 6px;"> <i class="fas fa-shopping-cart" style="margin-right: 8px;"></i> Add to Cart </button> |
Example 3: Social media icons
|
0 1 2 3 4 5 6 7 8 |
<a href="#"><i class="fab fa-instagram" style="font-size: 32px; color: #E1306C; margin: 0 10px;"></i></a> <a href="#"><i class="fab fa-youtube" style="font-size: 32px; color: #FF0000; margin: 0 10px;"></i></a> <a href="#"><i class="fab fa-whatsapp" style="font-size: 32px; color: #25D366; margin: 0 10px;"></i></a> |
Example 4: Spinning loader icon
|
0 1 2 3 4 5 6 |
<i class="fas fa-spinner fa-spin" style="font-size: 60px; color: #0066ff;"></i> |
See how easy? Just add class fa-spin and it rotates!
Summary – Why everyone loves Font Awesome
- Super easy to use (just add one line + class names)
- Looks perfect on every device
- You control size, color, shadow with normal CSS
- Huge library (especially Pro)
- Free version is already very powerful
- Constantly updated (new icons every few months)
So next time you see a nice website with clean icons — there’s a very good chance it’s using Font Awesome.
Any questions? Want me to show you more examples — like animated icons, stacked icons, or how to search for the perfect icon? Just ask! 😄
