How to Add Social Media Icons with Theme Colors Using Font Awesome – Step-by-Step Tutorial

Social Media Icons with Theme Based Colors

Customize social media icons to match your blog or website theme colors using Font Awesome.

Instead of using default brand colors, you can make your social media icons match your site’s theme for a more cohesive and stylish look.

Theme-based colors create a consistent design across your blog or website.

Quick Key Takeaways

  • Uses Font Awesome 7.0.0 (free CDN)
  • Responsive and accessible icons
  • Hover effects and tooltips included
  • Icons styled to match your blog’s theme colors

Full Tutorial Code

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet" /> <style> nav.social-nav { margin: 20px 0; } .social-menu { display: flex; justify-content: center; align-items: center; list-style: none; border: 1px solid #e5e7eb; background-color: transparent; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 16px; margin: 16px 0; flex-wrap: wrap; } .social-menu li { margin: 5px; position: relative; } .social-menu a { text-decoration: none; position: relative; display: inline-block; } .social-menu i { width: 40px; height: 40px; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; background-color: #000; color: #fff; } .tooltip { visibility: hidden; background-color: #000; color: #fff; font-size: 12px; text-align: center; padding: 5px 8px; border-radius: 4px; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, transform 0.3s; white-space: nowrap; z-index: 1; } .social-menu a:hover .tooltip, .social-menu a:focus .tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(5px); } .social-menu a:focus i { outline: 2px dashed rgba(255, 255, 255, 0.6); outline-offset: 3px; } .social-menu i:hover { transform: scale(1.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border-radius: 0; background-color: #000; color: #fff; } @media (max-width: 600px) { .social-menu i { width: 32px; height: 32px; font-size: 16px; } .social-menu li { margin: 3px; } } </style> <script> document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.social-menu a').forEach(link => { if (link.href.includes('username')) { const li = link.closest('li'); if (li) li.style.display = 'none'; } }); }); </script> <main> <nav class="social-nav" aria-label="Social media links"> <ul class="social-menu"> <li><a href="https://youtube.com/@username" aria-label="YouTube" target="_blank"><i class="fa-brands fa-youtube"></i><span class="tooltip">YouTube</span></a></li> <li><a href="https://snapchat.com/add/username" aria-label="Snapchat" target="_blank"><i class="fa-brands fa-snapchat"></i><span class="tooltip">Snapchat</span></a></li> <li><a href="https://t.me/username" aria-label="Telegram" target="_blank"><i class="fa-brands fa-telegram"></i><span class="tooltip">Telegram</span></a></li> <li><a href="https://twitter.com/username" aria-label="Twitter" target="_blank"><i class="fa-brands fa-x-twitter"></i><span class="tooltip">Twitter</span></a></li> <li><a href="https://facebook.com/username" aria-label="Facebook" target="_blank"><i class="fa-brands fa-facebook"></i><span class="tooltip">Facebook</span></a></li> <li><a href="https://instagram.com/username" aria-label="Instagram" target="_blank"><i class="fa-brands fa-instagram"></i><span class="tooltip">Instagram</span></a></li> <li><a href="https://threads.net/username" aria-label="Threads" target="_blank"><i class="fa-brands fa-threads"></i><span class="tooltip">Threads</span></a></li> </ul> </nav> </main>

How to Add in Blogger Blog

Follow the previous article's instructions. Paste this code using Theme HTML or Layout Gadget, and your theme-based colors will display.

Let’s Talk

Do you prefer dark theme icons or light theme icons for your social media links? Comment below.

Final Thoughts

Theme-based icons keep your blog’s design uniform and visually appealing while maintaining full functionality and accessibility.

FAQs

Can I change the theme colors later?

Yes, just update the background-color and color properties in the CSS.

Will it work on all devices?

Yes, it’s fully responsive and works across desktops, tablets, and mobiles.

Can I mix theme and brand colors?

Absolutely. You can use theme colors for some icons and default brand colors for others.

Labels:

Comments

Post a Comment

Popular Posts

Start Before You’re Ready: Why Fear Shouldn’t Stop You From Creating

Image
A personal note on beginnings, fear, and the power of showing up There’s something intimidating about a blank page. It stares back at you — quiet, wide, and endless. It asks, “Are you sure you have something worth saying?” And for the longest time, I didn’t know how to answer that. Starting this blog wasn’t easy. Not because I didn’t want to — I’ve wanted to for months — but because I kept waiting for the “right moment.” I thought I needed to have everything figured out: a perfect writing style, a list of blog topics, a niche, a brand, a voice. Spoiler: I had none of that. You don’t have to be ready to begin. You just have to begin to get ready. Quick Key Takeaways Don’t wait for the perfect moment—start now. Fear is normal, but it shouldn’t stop you. Consistency and showing up matter more than perfection. Why Now? Waiting was quietly killing my creativity. Every day I didn’t write, I lo...
Read more

How to Add a Responsive Image Slideshow Using CSS & JS – Step-by-Step Tutorial

Image
Create a responsive, user-friendly image slideshow for your website or blog using HTML, CSS, and minimal JavaScript. This tutorial guides you step-by-step to build a clean, interactive slideshow with navigation dots, fully responsive design, and automatic rotation between slides. Slideshow features like smooth transitions, navigation dots, and adaptable layouts enhance user engagement and make your website look more professional. Whether you are showcasing images, products, or announcements, this slideshow is an excellent way to highlight content dynamically. Adding a visually appealing slideshow to your site not only draws attention but also improves the overall user experience. Properly implemented slideshows can make your content more interactive, engaging, and organized. Quick Key Takeaways Simple HTML structure combined with CSS for styling and JavaScript for slide control ensures easy implementation. Navigation dots allow users...
Read more