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.

You May Also Like:

Create a Gravity Form for Two Users

Defining Editor Font Sizes in the Block Editor

Notes on Working with Custom Colors in the WordPress Block Editor

Remove Time from Comments in Genesis

How to Use Font Awesome with Simple Social Icons

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;
}Code language: CSS (css)

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:

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;
}Code language: PHP (php)

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.