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

Social Media Icons With Brand Colors

Create stylish social media icons for your website or blog using Font Awesome with default brand colors.

Social media integration is a must-have for blogs and websites. This post demonstrates a simple yet modern social media icon bar using Font Awesome and CSS—fully responsive and accessible.

A clean design can make your social icons stand out and improve user engagement.

Quick Key Takeaways

  • Uses Font Awesome 7.0.0 (free CDN)
  • Fully responsive and accessible
  • Includes hover effects and tooltips
  • Brand-specific background colors (YouTube, Snapchat, Telegram, Facebook, Instagram and Threads)

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; } .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; } .fa-youtube { background-color: #FF0000; color: white; } .fa-snapchat { background-color: #FFFC00; color: black; } .fa-telegram { background-color: #0088cc; color: white; } .fa-x-twitter { background-color: #000000; color: white; } .fa-facebook { background-color: #1877F2; color: white; } .fa-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: white; } .fa-threads { background-color: #000000; color: white; } @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

You can add these stylish social media icons to your Blogger blog using two main methods:

Option 1: Add via Theme HTML

  1. Log in to Blogger and go to Theme → Edit HTML.
  2. Paste the Font Awesome CDN link in the <head> section.
  3. Add the CSS block (inside <style> tags) in <head>.
  4. Insert the social media HTML snippet in the location you want (header, footer, etc.).
  5. Add the JavaScript to hide placeholder links containing "username". This step is required.
  6. Save the theme and preview your blog.

This method integrates the icons directly into your template, making them appear site-wide.

Option 2: Add via Layout Gadget

  1. Go to Layout → Add a Gadget → HTML/JavaScript.
  2. Copy the full code above (Font Awesome, CSS, HTML, JS) into the gadget.
  3. Drag the gadget to your desired position (sidebar, footer, etc.).
  4. Save and preview the blog.

This method is easier for beginners and avoids editing the main template.

Let’s Talk

Which social media icons do you use the most for your blog or site? Share your favorite color theme in the comments below.

Final Thoughts

This design gives your blog a clean, modern look and ensures users can easily find your social profiles. You can further customize hover effects, sizes, or animation to match your site’s style.

FAQs

Can I add more social media platforms?

Yes, Font Awesome supports many brand icons. Simply add the appropriate class and link.

Is Font Awesome free to use?

Yes, the brand icons used here are free to use via the CDN.

How do I make icons larger or square?

Adjust font-size, width, height, and border-radius in CSS.

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