Chapter 6: Icons Alert

1. What is the “Icons Alert” Page All About?

It’s a cheat-sheet / reference list showing only the free Font Awesome 5 icons in the “Alert” category.

These icons are perfect for:

• Error messages / success messages
• Notification badges
• Warning banners
• Toast alerts
• Danger buttons
• Important info boxes

The page has a table like:

• Icon preview
• Class name (e.g., fas fa-bell)
• Unicode (e.g., )
• “Try it” button → click to see live example

2. The Main Free Alert Icons in Font Awesome 5 (Most Popular Ones)

Here are the key ones you’ll find on that page (solid style fas unless noted — these are the classics everyone uses):

• Bell (the king of notifications!) <i class=”fas fa-bell”></i> → Regular notification bell (solid filled) <i class=”far fa-bell”></i> → Outline version (lighter, often for “no new notifications”)
• Exclamation Circle (big red warning vibe) <i class=”fas fa-exclamation-circle”></i> → Circle with ! inside — super common for errors
• Exclamation Triangle (the classic “warning” sign) <i class=”fas fa-exclamation-triangle”></i> → Triangle with ! — means “careful!” or “danger ahead”
• Info Circle<i class=”fas fa-info-circle”></i> → Blue info icon for helpful tips
• Question Circle<i class=”fas fa-question-circle”></i> → Help / FAQ / “What is this?”
• Bell Slash (mute notifications) <i class=”fas fa-bell-slash”></i>
• Exclamation (simple !) <i class=”fas fa-exclamation”></i>
• Radiation (nuclear / high danger warning) <i class=”fas fa-radiation”></i>
• Skull Crossbones (very dangerous / poison) <i class=”fas fa-skull-crossbones”></i>
• Bomb (explosive alert) <i class=”fas fa-bomb”></i>

There are more (like fa-volume-mute, fa-siren in later patches, but the top ones above are the free core).

3. Real Code Examples – How Developers Use These Alert Icons

Example 1: Simple Warning Box (very common in forms)

Example 2: Notification Badge (like Instagram or email count)

Example 3: Error Message in a Card

Example 4: Success / Info Alert

Example 5: Help / Question Button

4. Teacher Tips for Using Alert Icons Like a Pro

• Colors matter — Red/orange for danger/warning, blue for info, green for success (even if the icon itself is neutral).
• Size & spin — Add fa-2x, fa-3x, or fa-spin for loading alerts: <i class=”fas fa-spinner fa-spin”></i> Please wait…
• Accessibility — For meaningful alerts, add aria-label:
  HTML

  PHP

  0 1 2 3 4 5 6

  <i class="fas fa-bell" aria-label="You have 5 new notifications"></i>

• In newer Font Awesome 6/7, they added more (like triangle-exclamation, sharper designs), but FA5 still looks great on most sites.

Summary – Quick Teacher Wrap-Up

Icons Alert = W3Schools’ dedicated list of Font Awesome 5 icons for alerts, warnings, notifications, exclamations — bell 🔔, exclamation-triangle ⚠️, info-circle ℹ️, etc. Use them whenever you want to grab user’s attention: errors, warnings, badges, toasts.

Clear now? Want me to:

• Build a full “alert messages” demo page with 4 types (success/info/warning/danger)?
• Show how these look in Bootstrap alerts?
• Compare FA5 alert icons vs newer FA7 versions?
• Or move to the next one like “Icons Animals”?

Just say the word — your teacher is ready! ⚠️🔔🚨