How to add a social icon for WordPress Sparkling theme

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.

Step-by-step

1. 1. 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.
   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.