You want to add icons like Facebook, Instagram, star, check, arrow in Blogger menu, sidebar, posts but Blogger has no icons by default. Solution: Font Awesome.
In Post #115, you'll add Font Awesome icons in Blogger in 5 minutes.
Step 1: What is Font Awesome?
| Feature | Details |
| What | Free icon library - 2000+ icons - Facebook, Twitter, phone, email, star, heart, check, arrow |
| Use in Blogger | Menu, social icons, about me widget, posts, buttons, contact page |
| Cost | Free CDN, no need account |
| Size | Lightweight - 1 line code - no slow |
Step 2: Add Font Awesome CDN to Blogger Theme
- Go to Blogger → Theme → Edit HTML
- Find
<head>tag (Press Ctrl+F type<head>) - Paste this code just below
<head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
- Click Save theme
Done - Font Awesome now works on all pages.
Step 3: How to Use Icons - Copy Paste Codes
| Where | Icon Code to Paste | Preview |
| Social Media Icons in Sidebar | <i class="fab fa-facebook"></i> Facebook <i class="fab fa-instagram"></i> Instagram <i class="fab fa-twitter"></i> Twitter <i class="fab fa-youtube"></i> YouTube <i class="fab fa-whatsapp"></i> WhatsApp |
Facebook, Instagram icons |
| Contact Page | <i class="fas fa-phone"></i> +234 800 000 0000 <i class="fas fa-envelope"></i> email@gmail.com <i class="fas fa-map-marker-alt"></i> Lagos, Nigeria |
Phone, email icons |
| Check List in Post | <i class="fas fa-check-circle" style="color:green"></i> Free domain <i class="fas fa-check-circle" style="color:green"></i> Free hosting |
✅ check icons |
| Star Rating | <i class="fas fa-star" style="color:gold"></i> <i class="fas fa-star" style="color:gold"></i> <i class="fas fa-star" style="color:gold"></i> <i class="fas fa-star" style="color:gold"></i> <i class="fas fa-star" style="color:gold"></i> |
★★★★★ |
| Button with Arrow | <a href="#" style="background:#000;color:#fff;padding:10px 20px;text-decoration:none;border-radius:5px;">Download Now <i class="fas fa-arrow-right"></i></a> |
Button → |
Step 4: Add Social Icons in Blogger Menu (Pro Method)
- Go to Layout → Add Gadget → HTML/JavaScript
- Paste this code for styled social icons:
<style>
.social-icons a{font-size:24px;margin:0 10px;color:#000;text-decoration:none;}
.social-icons a:hover{color:#007bff;}
</style>
<div class="social-icons">
<a href="https://facebook.com/yourpage" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://instagram.com/yourpage" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com/yourpage" target="_blank"><i class="fab fa-x-twitter"></i></a>
<a href="https://youtube.com/yourpage" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="https://wa.me/2348000000000" target="_blank"><i class="fab fa-whatsapp"></i></a>
</div>
Step 5: Add Icons in Blogger Post Button
When writing post in HTML mode, paste:
<div style="text-align:center;margin:20px 0;"> <a href="YOUR-LINK" style="background:#000;color:#fff;padding:12px 25px;border-radius:5px;text-decoration:none;display:inline-block;"> <i class="fas fa-download"></i> Download Template Free </a> </div>
This creates black button with download icon - increases clicks 30%.
Step 6: Fix Common Errors
| Problem | Fix |
| Icons show as square box | CDN not added in <head> - recheck Step 2, save theme, clear cache Ctrl+F5 |
| Icons too big/small | Add style: <i class="fas fa-star" style="font-size:18px;"></i> Change 18px to 14px or 24px |
| Icons slow site | Use Cloudflare CDN link already fast, only 1 request, no slow |
| Want brand colors | <i class="fab fa-facebook" style="color:#1877F2;"></i> - Facebook blue, Instagram pink #E4405F, WhatsApp green #25D366 |
Post #115 Complete - You now have Font Awesome icons everywhere.
Next Post #116 is: How to Add SVG Icons in Blogger - Lighter alternative to Font Awesome (no CDN, faster).
0 Comments