Updated 10/27/14: At some point, the theme was updated and now this fix doesn’t work. Instead, I recommend downloading and installing Simple Social Icons. You can make them any shape you want, any color you want, and all of the icons people have been asking me about (like Tumblr) are already included.

Here is a list of the Hex Codes for the colors used in the Sugar & Spice Theme, so you can match them to your blog.

Baby Blue: #a7dbd8
Emerald: #36ab8a
Green: #97c379
Mint: #9ed6bb
Orange: #f66b40
Peach: #f9aa89
Pink: #f8afb8
Red: #f03b42
Violet: #bb86b4
Yellow: #fff568

One problem people have with Simple Social Icons is that the space between each icon is too large. To fix this, all you do is go to the plugin’s stylesheet, find this section: 

.simple-social-icons ul li {
	background: none !important;
	border: none !important;
	float: left;
	list-style-type: none !important;
	margin: 0 6px 12px !important;
	padding: 0 !important;
}

and change the “6px” to a lower number. That’s it! Much easier than the Sugar & Spice icons. 

Also, you do NOT have to redo the changes when the plugin updates. Just in case you were wondering. 🙂

==================

I realize that this will only help about one person out there, but since that one person is probably as frustrated as I was two months ago, it’s worth it.

One problem with the WordPress.org forums is that so many people there seem to think that everyone running a blog understands HTML and CSS. This is so not true. Many of us have a working knowledge (knowing how to find the header image or how to change font colors), but knowing when to write new sections and what to even write goes far beyond the abilities of most bloggers. So fixing issues like this is really difficult for most of us.

I love the Sugar & Spice theme. It’s everything I needed in a new theme. It was easy to set up, easy to change different features (namely the color scheme), and free (awesome!), but adding my social media icons was anything but simple.

After about a week of yelling at my computer (and one FTP update gone awry), I managed to figure out how to add more social media icons to the theme. I’ve also learned that many other people have been posting this question in the forums. They either received confused responses or no response at all. Good news: Another blogger contacted me when she was having similar problems and I managed to save the email exchanged between us. So today, I am here to explain how to add more social media icons to your Sugar and Spice theme.

Note: I am not a web designer. If you have problems beyond adding a new icon, please go to the forums for Sugar & Spice. Good luck finding an answer. -_-

NOTE: I am NOT a professional. Everything I know about CSS, I learned from trial and error. Please do not send me emails asking about other themes. I can’t help you.

Add Social Media Icons to the Sugar and Spice Theme

Before we start, let me explain that you can only use social media icons that show up on this website. This is actually a font that the designer installed on the theme. Keep this website handy, because you’ll need the exact name of the icon you want to use.

Step 01: Open the Sugar & Spice folder you downloaded. Unless you’ve changed where your downloads go, you can find it by going to Downloads (on your computer) > sugar-and-spice.1.2. Click on that and unzip it. Go to sugar-and-spice > inc > widgets. Find the file called social-widget.php. Open it in a text editor (like NoteTab Lite). 

Step 02: Copy & paste the contents of the file into a new document. Save that as “social-widgetORIGINAL.php” or something so you know it’s the original file and not the one you edited.

Step 02: Now the fun part begins! Go back to the file you opened (social-widget.php) and now you’re going to start adding code. The easiest way I found to do this was to find a social media word that I knew would be in there. I went with “facebook.” Open the “find” box (CTRL + F) and type in “facebook.” (If your editing program doesn’t have the ability to find a phrase, then copy & paste your document into Word or something, make the changes, and then copy & paste it back onto the original file.) Every time you see a new instance of “facebook,” you’ll see a list of social media sites. Just copy and paste the lines and insert the name of the social media you want to use. 

Here is an example of the code I added.  I just copied the original code verbatim, pasted it, and then changed every instance of “facebook” to “tumblr.” (Click on the picture to enlarge it.)

As for the icon you add, on the second code you add, there is a part that says, “icon icon-facebook.” The part you change is the icon-facebook. Leave the first icon alone.

When you’ve finished this step, save the file.

Step 03: Open your FTP. Go to public_html and click on the blog you want to customize (for me, it’s “diybudgetgirl”). From there, go to wp_content > themes > sugar-and-spice > inc > widgets. Drag and drop the social-widget.php file (the one you changed) into that. When it asks if you want to replace the file, say yes.

Step 04: Go back to your WordPress Dashboard. Go to Appearance > Widgets. Make sure you’ve added the Sugar & Spice: Social Media Widget to your widgets bar. You should now be able to add a link to your new social media page!

Using Different Icons

Not all of the icons on the website I linked to were installed on the theme. If you want to add an icon the designer didn’t install (like the robot or something), open the sugar-and-spice.1.2 folder on your computer again. Go to sugar-and-spice > fonts > icofont.css. I recommend copying and pasting into Word because you’ll be able to find things more easily.

Find this section:

.icon-envelope, .icon-facebook, .icon-twitter, .icon-phone, .icon-rss, .icon-google-plus, .icon-pinterest, .icon-envelope-alt, .icon-instagram, .icon-youtube, .icon-tumblr, .icon-comment, .icon-linkedin, .icon-flickr, .icon-instagram-2, .icon-home, .icon-google-plus-2 {

Add the name of the icon you want to use (like .icon-bug or something). It doesn’t have to be in order, just throw it in at the end (before the bracket). Remember to add a comma after the google-plus icon or it won’t work.

Now scroll down to the bottom of the document and copy and paste this part:

.icon-google-plus-2:before {

                content: “\e002”;

}

Change the name (.icon-google-plus-2) to the name you entered to the previous list. Change the number  (e002) to the unicode on the site. (You’ll find this by clicking on the icon you want to use. It will be right under the series of pictures at the top, in a light grey color.) The unicode for .icon-bug, for instance, is F188. So what you added will look more like this:

.icon-bug:before {

                content: “\F188“;

}

Save that and add it to the FTP by going back to the sugar-and-spice theme folder, opening fonts and dragging and dropping the icofont.css to the folder.

Done!

Please note that, since the website for the fonts doesn’t have a code for Bloglovin, you will either have to substitute it with something else or use the button from the Bloglovin site. There’s nothing I can do about this, so please don’t email me about it.

Feel free to leave any questions in the comment section!