Add Social Media Icons in WordPress Without Plugin (Stylish & Responsive)
Last Updated: 2026
Want to add social media icons in WordPress without using plugins? This guide will show you the easiest and fastest method.
Adding social icons improves user engagement and helps grow your audience across platforms.
📌 Step 1: Add Font Awesome CDN
Add this code inside your <head> section:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
👉 Get more icons from: https://fontawesome.com/icons
📌 Step 2: Add Social Icons HTML
Add this inside a Text/HTML widget:
<ul id="social-menu"> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li> </ul>
📌 Step 3: Add CSS Styling (Modern Design)
#social-menu {
list-style: none;
padding: 0;
text-align: center;
}
#social-menu li {
display: inline-block;
margin: 10px;
}
#social-menu li a {
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: #f1f1f1;
text-align: center;
transition: 0.3s;
}
#social-menu li i {
font-size: 18px;
color: #333;
}
#social-menu li a:hover {
background: #0073aa;
}
#social-menu li a:hover i {
color: #fff;
}
🚀 Advanced Options (EXTRA FEATURES)
✅ 1. Open Links Safely
target="_blank" rel="noopener noreferrer"
✅ 2. Add Tooltip
<a href="#" title="Follow us on Facebook">
✅ 3. Add Custom Colors
.fa-facebook { color:#1877f2; }
.fa-twitter { color:#1da1f2; }
.fa-youtube { color:#ff0000; }
✅ 4. Add Hover Animation
#social-menu li a:hover {
transform: scale(1.2);
}
✅ 5. Add Fixed Floating Icons
#social-menu {
position: fixed;
left: 10px;
top: 50%;
}
❗ Common Problems & Fix
❌ Icons not showing?
- Check CDN added correctly
- Clear cache
❌ Styling not working?
- Check CSS placement
❓ FAQ
Q: Why not use plugin?
A: Plugins slow down your site. Manual method is faster.
Q: Is Font Awesome free?
A: Yes, most icons are free.
Q: Can I customize icons?
A: Yes, using CSS and classes.
🧠 Conclusion
Adding social media icons without plugin makes your WordPress site faster, cleaner, and more customizable.
Use the above method to create modern and professional social widgets easily.
Comments
plz visit -
https://www.guru-nanak-ji.com
informational hub
informational hub
informational hub
informational hub
informational hub
Social media management