Chapter 12: Icons Beverage

1. What is the “Icons Beverage” Page?

This page is a themed reference list showing only the drink-related icons from Font Awesome 5’s free collection.

These icons represent beverages — everything from casual drinks to party toasts, coffee breaks, cocktails, and cheers moments. They’re perfect for:

• Restaurant/cafe menus or websites
• Bar/pub apps
• Food delivery UIs
• Event invitations (wedding toasts, birthday parties)
• Coffee shop loyalty cards
• Blog posts about drinks/recipes
• Fun social media posts or e-commerce for beverages

In Font Awesome 5 free, the Beverage category is small but focused (about 8–10 icons, mostly solid style). Newer versions (FA6/7) added many more (like whiskey glass, mug variants, wine bottle), but FA5 free gives the essentials that millions of sites still use.

2. Main Free Beverage Icons in Font Awesome 5 (From the W3Schools Page)

Here are the key free ones listed on the page (solid fas style unless noted):

• Beer (classic beer mug – the most popular one!) <i class=”fas fa-beer”></i>
• Cocktail (fancy mixed drink with umbrella) <i class=”fas fa-cocktail”></i>
• Coffee (hot coffee mug – everyday essential) <i class=”fas fa-coffee”></i>
• Flask (lab/science flask or hip flask vibe) <i class=”fas fa-flask”></i>
• Glass Cheers (clinking glasses for celebration) <i class=”fas fa-glass-cheers”></i>
• Glass Martini (elegant martini glass) <i class=”fas fa-glass-martini”></i>
• Glass Martini Alt (alternative martini style) <i class=”fas fa-glass-martini-alt”></i>
• Glass Whiskey (whiskey on the rocks) <i class=”fas fa-glass-whiskey”></i>
• Mug Hot (steaming hot drink – tea/coffee) <i class=”fas fa-mug-hot”></i>

These are the core free Beverage icons in FA5 (from the table on W3Schools). Some like fa-wine-glass or fa-wine-bottle might be Pro-only in v5.

3. Real Code Examples – How Developers Use Beverage Icons

Example 1: Cafe Menu Header (very common)

Example 2: Bar Specials Card

Example 3: Cheers / Toast Button (party site)

Example 4: Hot Drink List for Winter Blog

Example 5: Whiskey Bar Footer

4. Teacher Tips for Beverage Icons

• Colors — Brown/coffee tones (#6f4e37) for coffee/tea, vibrant reds/pinks (#e91e63) for cocktails, gold/amber (#ffc107) for beer/whiskey.
• Size & spin — Use big sizes (fa-4x, fa-5x) on menus; add fa-spin for fun steaming effect on fa-mug-hot: <i class=”fas fa-mug-hot fa-spin”></i>
• Pairing — Combine with Food icons (pizza, burger) for restaurant sites, or Party icons (birthday-cake) for events.
• Accessibility — Always add text or aria-label for buttons: <i class=”fas fa-beer” aria-label=”Beer menu”></i>
• In newer Font Awesome 6/7, Beverage category grew hugely (beer-foam, bottle-water, wine-bottle, etc.) — consider upgrading for modern drink apps.

Summary – Quick Recap

Icons Beverage = W3Schools’ page listing Font Awesome 5 free drink icons like beer 🍺, cocktail 🍹, coffee ☕, glass-cheers 🥂, mug-hot 🔥, glass-whiskey 🥃, etc. Great for cafes, bars, menus, party sites, food blogs, or any beverage-themed project.

Got the idea now? Want me to:

• Build a full mini “Cafe Menu” page demo with these icons?
• Show differences vs newer FA versions (more drinks)?
• Animate a steaming coffee mug?
• Or next category like “Icons Brands”?

Just raise your hand — teacher is ready with the next round! ☕🍹🍺🚀