Chapter 17: Icons Charity
1. What is the “Icons Charity” Page?
It’s a specialized cheat-sheet listing only the free icons from Font Awesome 5 that relate to charity, giving, donations, helping others, non-profits, kindness, and humanitarian themes.
These icons are perfect for:
- NGO / non-profit websites
- Fundraising pages / donation forms
- Charity event invitations
- CSR (Corporate Social Responsibility) sections on company sites
- Volunteer signup pages
- Crowdfunding campaign UIs
- Blog posts about social good, relief work, or giving back
- Footers/badges saying “We support charity”
Font Awesome added this category in later FA5 updates (around 5.0.10+ or so), and in the free edition, it’s a small but meaningful set (about 5–8 icons, mostly solid style fas). Newer FA6/7 expanded it a lot (more hands, hearts, dove variants, etc.), but FA5 free keeps the essentials that many non-profits still use today.
2. Main Free Charity Icons in Font Awesome 5 (From the W3Schools Page)
Here are the key free ones you’ll find in the table (solid fas style unless noted):
- Donate (hand giving coin/money – donation symbol) <i class=”fas fa-donate”></i>
- Dove (peace dove – often for charity/relief/peace efforts) <i class=”fas fa-dove”></i>
- Gift (wrapped present – giving gifts/donations) <i class=”fas fa-gift”></i>
- Globe (global/world – for international charity/help worldwide) <i class=”fas fa-globe”></i>
- Hand Holding Heart (hand with heart – caring, support, love) <i class=”fas fa-hand-holding-heart”></i>
- Hand Holding USD (hand holding dollar – direct donation/money giving) <i class=”fas fa-hand-holding-usd”></i>
- Hands Helping (two hands helping each other – community support) <i class=”fas fa-hands-helping”></i>
- Heart (love/care – basic but powerful for charity) <i class=”fas fa-heart”></i> (often paired)
These are the core ones in the Charity category for FA5 free. Some like fa-hand-holding-heart and fa-hands-helping were big additions for giving themes.
3. Real Code Examples – How to Use Charity Icons
Example 1: Donation Button / Call to Action (very common on NGO sites)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <button style="background: #e91e63; color: white; padding: 15px 30px; border: none; border-radius: 50px; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"> <i class="fas fa-donate" style="margin-right: 10px; font-size: 1.8rem;"></i> Donate Now – Help Change Lives </button> |
Example 2: Charity Footer Badge / Support Statement
|
0 1 2 3 4 5 6 7 8 9 10 |
<footer style="text-align: center; padding: 30px; background: #f5f5f5; color: #333;"> <i class="fas fa-hand-holding-heart" style="font-size: 4rem; color: #ff4081; margin-bottom: 15px;"></i> <p>We believe in giving back. 10% of every sale goes to local charities.</p> <p><i class="fas fa-dove" style="margin-right: 8px; color: #2196f3;"></i> Supporting peace & relief worldwide</p> </footer> |
Example 3: Volunteer Signup Section
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="border: 1px solid #4caf50; padding: 25px; max-width: 450px; margin: 30px auto; border-radius: 12px; text-align: center; background: #e8f5e9;"> <i class="fas fa-hands-helping" style="font-size: 5rem; color: #4caf50; margin-bottom: 20px;"></i> <h2>Join Our Volunteer Team</h2> <p><i class="fas fa-gift" style="color: #ff9800; margin-right: 8px;"></i> Give your time and make a difference</p> <button style="background: #4caf50; color: white; padding: 12px 24px; border: none; border-radius: 6px;"> Sign Up Today </button> </div> |
Example 4: Global Charity Campaign Card
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="background: #e3f2fd; padding: 20px; border-radius: 10px; text-align: center;"> <i class="fas fa-globe" style="font-size: 4rem; color: #2196f3; margin-bottom: 15px;"></i> <h3>Global Relief Fund</h3> <p><i class="fas fa-hand-holding-usd" style="color: #4caf50; margin-right: 8px;"></i> Every rupee helps someone in need</p> </div> |
4. Teacher Tips for Charity Icons
- Colors — Soft pinks/reds (#e91e63, #ff4081) for heart/hand-holding, greens (#4caf50) for helping/growth, blues (#2196f3) for globe/dove (trust & peace).
- Size & combo — Use big sizes (fa-5x, fa-6x) on donation pages. Combine with Hands (hands-helping), Status (heart), or Users & People (users) for fuller giving themes.
- Animations — Add fa-beat or fa-pulse to hearts for emotional effect: <i class=”fas fa-heart fa-beat”></i>
- Accessibility — Always pair with clear text (e.g., “Donate” button); add aria-label=”Donate to support children” for screen readers.
- Upgrade note — In FA6/7, Charity has more free icons (like seedling for growth, circle-heart, etc.) — great for modern non-profit designs.
Summary – Quick Recap
Icons Charity = W3Schools’ page listing Font Awesome 5 free charity/giving icons like donate 💰, hand-holding-heart ❤️, hands-helping 🤝, dove 🕊️, gift 🎁, globe 🌍, etc. Perfect for NGOs, fundraising, volunteer pages, CSR sections, or any “help others” theme.
Got it now? Want me to:
- Build a full “Donate Today” landing page demo with these icons?
- Show how Charity icons look in a non-profit footer?
- Compare FA5 vs newer versions (more giving icons)?
- Or next one like “Icons Chat”?
Just tell your teacher — we’re making the world kinder one icon at a time! ❤️🤝🕊️🚀
