How to add a social icon for WordPress Sparkling theme

written by Marie Last updated on May 22, 2017

Published on March 12, 2016

Sparkling

Today, I ran accross a small problem with my WordPress theme Sparkling, from Colorlib. I wanted to add Stack Overflow to my icons. It wasn’t included in the theme. Like we can read it in the documentation, the theme supports these links : Facebook, Twitter, Dribbble, Flickr, Google+, Skype, Pinterest.com, LinkedIn, Vimeo, Tumblr, Instagram, RSS, SoundCloud, Foursquare, Github, Spotify and emails. If you want to add any other website, you’ll find yourself in the same situation I was in. Luckily, you are reading this article and I will guide you step by step! 🙂

On the boards I found this thread about social icons. While reading the replies I discovered how to add new icons to the social media option the theme offers! I thought I’d share the information to avoid people searching a long time like I did.

follow me

 

Step-by-step

      1. On your wordpress dashboard, go to Appearance > Modify the CSS
      2. Add this code snippet at the bottom. You can change the stackoverflow.com website by whatever website you want to add :
    #menu-social li a[href*="stackoverflow.com"] .fa:before, .fa-lastfm:before {
    content: "f16c";
    }
    #menu-social li a[href*="stackoverflow.com"]:hover {
    background: #F48024;
    }
    
    1. For the propriety “content” go to Font Awesome. It is the website Sparkling uses to get the icons images. If the website you want to add is not on this website, then you’ll have to search a bit more on google or play around this code to add your image.Font Awesome
    2. If you look under the icons for StackOverflow, there is “Unicode” with the value “f16c”. It is this value you need to replace in the “content” property. You need to keep the backslash ().
    3. Then, you only need to choose your background color on the hover of the mouse with a website like this one.

 

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.