Make Simple Social Icons a Little More Awesome

StudioPress has a nice little plugin called Simple Social Icons, which allows you to link to about a dozen different social media networks. It’s very easy to use, which is great, but if you want to customize it, it can get a little hairy, because the plugin has a lot of !important styles in its CSS, and they can be very difficult, if not impossible, to override.

I was looking through the source code for the plugin this week and discovered that the authors have provided a filter so that you can replace the plugin CSS with your own (cheers!). I did that, and discovered that the plugin packages its own icon font and imports that in the CSS file, so if you replace it, the path to that font is lost (jeers!).

I could, and at one point, did, copy the font files over to my theme, but then I decided that was a little bit silly, because wouldn’t it just be easier to use a font I’m already using? Namely, Font Awesome? If I could do that, I decided it would make everything, well, just a little more awesome.

Turns out, this also was pretty easy to do, as the plugin authors have thoughtfully also provided a filter for the glyphs (or icons or symbols or whatever you want to call them), too. So, with just a little bit of searching the Font Awesome library for the icons, I was able to completely swap out everything.

How to Use Font Awesome with Simple Social Icons

Update: Many thanks to Rian Rietveld for showing me how to make this even more awesome by making it accessible! To get this magic, you’ll want change two things from below:

This is a little more work, but it’s worth it!

Your first step is to create a new CSS file. I started out by just copying the plugin’s CSS file. Then I removed the font information, all of the !important declarations, and changed the “fontello” font family to “fontawesome”. Here’s what it looks like (if you’re reading this via RSS, you’ll want to come to the site):

.simple-social-icons {
overflow: hidden;
}
.simple-social-icons ul {
margin: 0;
padding: 0;
}
.simple-social-icons ul li {
float: left;
margin: 3px;
padding: 0;
border: none;
background: none;
list-style-type: none;
}
.simple-social-icons ul li a {
display: inline-block;
box-sizing: content-box;
width: 1em;
border: none;
font-family: "fontawesome";
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1em;
text-align: center;
text-decoration: none;
text-transform: none;
speak: none;
}
.simple-social-icons ul.aligncenter {
text-align: center;
}
.simple-social-icons ul.aligncenter li {
display: inline-block;
float: none;
}

Other than that, the only change I made to the style was to decrease the margin between the icons (line 12), because I wanted it smaller. So do what you like there. Save this as something unique, like simple-social-icons.css (I know, I am so creative), and upload it to your theme folder.

Note: I believe you can just add the above style to your main stylesheet, and then change out the plugin stylesheet for nothing, but that feels a little funky to me. In the name of research, I did just try it and it totally worked, so if you want to go that route, I suppose you can. (And if anyone wants to offer a compelling reason to do one over the other, let us know in the comments!)

Then you need to add one action and two filters to your theme’s functions file:

<?php
// do NOT include the opening tag above
add_action( 'wp_enqueue_scripts', 'rgc_simple_social_icons_fontawesome' );
/**
* Enqueue FontAwesome stylesheet
*/
function rgc_simple_social_icons_fontawesome() {
wp_enqueue_style( 'fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array(), '4.3.0' );
}
add_filter( 'simple_social_default_css', 'rgc_simple_social_icons_css' );
/**
* Replace Simple Social Icons' stylesheet
*/
function rgc_simple_social_icons_css( $css_file ) {
$css_file = get_stylesheet_directory_uri() . '/simple-social-icons.css';
// $css_file = ''; // alternate method: if you want to just add your styling to your theme styesheet
return $css_file;
}
add_filter( 'simple_social_default_glyphs', 'rgc_simple_social_icons_glyphs' );
/**
* Replace Simple Social Icons's glyphs with FontAwesome
*/
function rgc_simple_social_icons_glyphs( $glyphs ) {
$glyphs = array(
'bloglovin' => '<span class="fa fa-heart"></span>',
'dribbble' => '<span class="fa fa-dribbble"></span>',
'email' => '<span class="fa fa-envelope"></span>',
'facebook' => '<span class="fa fa-facebook"></span>',
'flickr' => '<span class="fa fa-flickr"></span>',
'github' => '<span class="fa fa-github"></span>',
'gplus' => '<span class="fa fa-google-plus"></span>',
'instagram' => '<span class="fa fa-instagram"></span>',
'linkedin' => '<span class="fa fa-linkedin"></span>',
'pinterest' => '<span class="fa fa-pinterest"></span>',
'rss' => '<span class="fa fa-rss"></span>',
'stumbleupon' => '<span class="fa fa-stumbleupon"></span>',
'tumblr' => '<span class="fa fa-tumblr"></span>',
'twitter' => '<span class="fa fa-twitter"></span>',
'vimeo' => '<span class="fa fa-vimeo-square"></span>',
'youtube' => '<span class="fa fa-youtube"></span>',
);
return $glyphs;
}
view raw functions.php hosted with ❤ by GitHub

What you just did was:

  1. Add Font Awesome to your website (line 5-11; if you’ve already done this, don’t do it again, because that would just be silly)
  2. Use the Simple Social Icons CSS filter to swap out its stylesheet for the one you just created(lines 14-23)
  3. Replace the Simple Social Icons glyphs (icons) with the comparable Font Awesome icons(lines 25-50)

Some of the networks have more than one option for the icon, so you might look through the Font Awesome library if you prefer one Facebook icon over another. Also, at this time, Font Awesome (version 4.3.0) does not have the Bloglovin’ icon, so if you need that one, this may not be the solution for you. I don’t use that one, but didn’t want to leave it empty here, so I swapped it out for a heart.

Another option for adding Font Awesome to your site is to use the Better Font Awesome plugin. The nice part about using this is that if Font Awesome gets updated, the plugin will, too.

Check the sidebar here for an example of what you should end up with if you follow the tutorial. It doesn’t look much different from what the plugin does on its own, but that’s part of the point–it shouldn’t look that much different. However, now, if I want to tweak the styling on the icons, I’m working with my own stylesheet, not trying to override the plugin’s, which was what started me down this path in the first place. Additionally, since I’m now using a font that I was already using, I’m not loading an extra font resource that I don’t really need.

Just be aware that if StudioPress adds a new social network to the plugin, you’ll need to update your array of glyphs with a new icon in order to use it, since you’re no longer using the icon font they are. And if you want to add a network that the plugin doesn’t support yet, check out this tutorial on how to add a new icon to Simple Social Icons.

You could easily follow these steps and use your own icon font, too, if that’s your thing–if you already have an option in place, this gives you the ability to use it, and still keep the super easy widget interface for your end user.

And there you have it–still the same easy Simple Social Icons plugin, just a tiny bit more awesome.

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. February 17, 2015

    Great stuff!

    I got a little lost staring at the image, then recovered to read the post 🙂

  2. February 17, 2015

    Everything about this is awesome. I use Font Awesome on just about every project and it always annoyed me to load another set of fonts just for a social widget.

    So happy to have this…

    *runs to copy snippets into Dash*

  3. April 17, 2015

    Great tutor man…Really helps…tweaked mine following your steps and it worked like a charm…Thanks man i can feel the engagement increase on ma blog…

  4. September 9, 2015

    Hey, nice post about styling it. Is it possible to change a logo? I want to add Weibo’s logo into it but the dont seem to support custom icons. Is there a way to tweak so I can replace some other icon with Weibo’s?

  5. October 26, 2015

    Hi–very helpful post; I had no idea you could do this. A question, though: do you know a way to modify this widget so that the icon is inactive? I want to put up four icons (to balance the page), but only have accounts at two sites for now.

    Thanks so much

    • October 26, 2015

      Hmmmm…that is an unusual question. Do you want the two extra icons to just be blank circles/squares? If that, I’m really not sure that there is an easy way to make that happen. If you want to use an existing icon and just have it not link to anything, you can always put in # for the URL/address. It would be a dead link, which I think users would find confusing, but it would be easier than trying to force blanks, I think. Maybe. Really not sure, sorry!

  6. October 26, 2015

    Believe it or not, I figured out my own little workaround.

    I created screenshots of each icon I needed to be a dead link, uploaded ’em, added a “Text” widget to each respective field, inserted the link to each respective image, figured out how to add an img tag to the code so they’d actually read as images (yeah, I’m new), and voila! instant dead links.

    Unbelievably (to me, anyway) they came in looking exactly like the live links.

    I know you’re probably laughing at me right now, but I feel like such a genius 😉

    Thanks so much for being nice and sharing so much. I have a feeling i’ll probably be back here fairly often.

    • April 18, 2017

      Yes, thank you for sharing this–this tutorial is no longer needed due to the improvements in Simple Social Icons 2.0.

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple