Chapter 98: Icons BS Glyphicons
What is Icons BS Glyphicons
Let me explain it slowly, clearly, like we’re sitting together in a classroom in 2026, and I’m your patient teacher who wants you to really understand the story.
1. What does “BS Glyphicons” actually mean?
“BS” here stands for Bootstrap (the most popular front-end CSS framework in the world).
“Glyphicons” is the name of the old built-in icon font that Bootstrap used from Bootstrap 3 (2013–2019).
So when people say “BS Glyphicons” or “Bootstrap Glyphicons”, they almost always mean:
The icon set that came bundled with Bootstrap 3 (2013–2019)
2. Quick history timeline (very important to understand in 2026)
| Year | Bootstrap version | Icon system used | Status in 2026 |
|---|---|---|---|
| 2011–2013 | Bootstrap 2 | No official icons (people used Font Awesome 3) | Very old – almost nobody uses anymore |
| 2013–2019 | Bootstrap 3 | Glyphicons Halflings (built-in) | Still alive on millions of legacy sites |
| 2018–now | Bootstrap 4 | Dropped Glyphicons – no icons included | Developers started using Font Awesome / others |
| 2021–now | Bootstrap 5 | No icons included (recommends Bootstrap Icons) | Modern standard |
| 2021–now | Bootstrap Icons | Separate project (not bundled) | Official modern free icon library (~2,000+) |
So Glyphicons = the icon font that only Bootstrap 3 officially included.
3. What did Glyphicons look like?
Glyphicons Halflings were very characteristic:
- Thicker strokes than modern line icons
- Filled style (not outline)
- Small size (originally designed for 14px–16px)
- Halflings name came because they were half of a larger paid icon set (the full set was commercial)
Most famous Glyphicons everyone still remembers:
- glyphicon glyphicon-home
- glyphicon glyphicon-user
- glyphicon glyphicon-envelope
- glyphicon glyphicon-search
- glyphicon glyphicon-star
- glyphicon glyphicon-ok (check)
- glyphicon glyphicon-remove (cross)
- glyphicon glyphicon-chevron-left / right
- glyphicon glyphicon-menu-hamburger
- glyphicon glyphicon-trash
- glyphicon glyphicon-pencil (edit)
- glyphicon glyphicon-plus / minus
They had a very 2013–2018 look — bold, a bit chunky, very recognizable.
4. How did people use Glyphicons in Bootstrap 3?
Very simple syntax (no prefix like fas or fab — just glyphicon class):
|
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 |
<!-- Classic Bootstrap 3 button with icon --> <button class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> Search </button> <!-- Navigation link --> <a href="#"> <span class="glyphicon glyphicon-home"></span> Home </a> <!-- Badge with icon --> <span class="badge"> <span class="glyphicon glyphicon-bell"></span> 3 </span> <!-- Form input with icon addon --> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" class="form-control" placeholder="Username"> </div> |
Notice:
- Always <span> (not <i>)
- Class = glyphicon glyphicon-name
- No extra font file needed — Bootstrap 3 included the font automatically
5. Why did Bootstrap remove Glyphicons in version 4 & 5?
Bootstrap team explained in 2018:
- Glyphicons were licensed (free only when used with Bootstrap)
- The design was starting to look dated
- File size was unnecessary if people only needed 10–20 icons
- Many developers preferred Font Awesome, Ionicons, or Material Icons
So starting with Bootstrap 4 (2018) → no icons included at all.
Later they created a separate free project: Bootstrap Icons (2021–present) with ~2,000 modern line icons.
6. Quick comparison table (2026 reality)
| Question | Glyphicons (Bootstrap 3) | Font Awesome 5 Free | Bootstrap Icons (2021–2026) |
|---|---|---|---|
| Release year | 2013 | 2017–2018 | 2021–present |
| Number of icons | ~260–270 | ~1,500–1,600 | ~2,000+ |
| Style | Thick, filled, dated look | Solid + Regular + Brands | Thin, modern line-style |
| License | Free only with Bootstrap | MIT (free) | MIT (free) |
| Prefix | glyphicon | fas / far / fab | bi (when using font) |
| File size (minified) | ~60–80 KB | ~150–180 KB | ~100 KB (sprite) |
| Still used in 2026? | Yes — millions of old Bootstrap 3 sites | Yes — legacy projects | Yes — very popular for new projects |
| Recommended for new projects in 2026? | No | No (use v6/7) | Yes |
7. Teacher Summary – Quick Truth Table (February 2026)
| Question | Answer for Glyphicons (Bootstrap 3) |
|---|---|
| What is it? | The built-in icon font of Bootstrap 3 (2013–2019) |
| How many icons? | ~260–270 |
| Style? | Thick, filled, 2010s look |
| Prefix? | glyphicon glyphicon-name |
| Still works? | Yes — CDN still active, millions of sites use it |
| Should new projects use it? | No — looks old, very limited icons |
| Modern replacement? | Bootstrap Icons (line style, 2,000+ icons) |
| Alternative popular replacements? | Font Awesome 6/7, Tabler Icons, Heroicons, Lucide, Material Symbols |
Final Teacher Advice (2026)
- If you are maintaining an old Bootstrap 3 website → keep using Glyphicons (it still works perfectly)
- If you are starting a new project in 2026 → do NOT use Glyphicons → Use Bootstrap Icons (if you’re already using Bootstrap) → Or use Font Awesome 6/7 free → Or use Tabler Icons / Heroicons / Lucide (all modern & free)
Got it now? Want me to:
- Show you a side-by-side visual comparison of the same icons in Glyphicons vs Bootstrap Icons vs Font Awesome 5?
- Build a classic Bootstrap 3-style button bar using Glyphicons?
- Give you the exact CDN link for Glyphicons + explain how to migrate to Bootstrap Icons?
- Or continue with the next category in our FA5 series?
Just raise your hand — teacher is ready! 📚✨🚀
