Adding Social Media Icons to WordPress With CSS Sprites

While there are many plugins out there that can help you add social media icons to your site, not all of them are created equal. Some of them could be a drain on your server, not to mention less customizable, too.

Fortunately, there’s an alternative that can help keep your site lightning-fast: CSS sprites.

Typically, separate images are added to a site for each social media link. While this would be considered sound coding, it does mean additional server requests for each image when a visitor loads the page. And of course, the more server requests a page has, the longer its load time.

The beauty of CSS sprites is that they can contain all the images for your social media icons while still mapping all the corresponding links appropriately. This translates into fewer server requests, saving bandwidth and fast-loading pages. A win-win situation!

In this tutorial I’ll show you how to use CSS to make your own fully customizable social media icons for your WordPress site, including code to save you some time and make this project easier for you to complete.

Continue reading, or jump ahead using these links:

• Creating Your Image
• Adding the Links and Image to Your Site
• Add Your Icons and Styles

Creating Your Image

The first step to creating your own CSS sprite is to create an image with the social media icons you wish to use. It should have two tightly stacked layers:

• Top Layer – The icons that will be visible on the page
• Bottom Layer – The icons that will be visible on mouse hover

Here’s an example of what your icons should look like:

Keep in mind that I didn’t use a transparent background for this image in order to display them clearly for this tutorial. Your image’s background should ideally be transparent so you can use the icons even if you change your theme’s styles and background color.

You also don’t need to add space in between each image since it can be added in with CSS later on. It’s completely up to you.

In this example, the icons will appear gray on the site, but when a mouse hovers over it, their colored versions will be displayed.

Once you have created your own set of social media icons, you’re ready to move onto the next step.

You will need to know the width and height of each symbol in pixels to before moving on, so be sure to make a note of it. An image editing program can help you identify this tidbit of information.

Adding the Links and Image to Your Site

Upload the image to your site and make a note of where the image is located so you can call it in your code later.

Next, you need to add the social media links to your site in order for these icons to do their job. You can do this with HTML:

This is the basic structure you will need for your links. Add the actual name of the site you wish to link to by replacing the instances of socialSite and Name of Social Media Site in the example above. Also be sure to replace the URL as well.

Repeat line two in the code above for each icon in the top line of the image you created, replacing the dummy text along the way. You may also choose to change the name of the div id to something more suitable for your needs.

The best place to put this code is directly in your theme’s files where you would like the icons to appear. For example, you could add the links to your sidebar.php, footer.php, header.php or page template files.

Don’t be shy, either. Feel free to add header text with a descriptive title or any other code you wish. Don’t forget to save when you’re done.

When you’re done, you won’t see any difference to your site, but that’s okay because we’re going to add the images next. You can worry about the styling, padding and spacing later as well.

I added titles to the links on my test site to show you where the links would otherwise be.

Add Your Icons and Styles

It’s time to add your icons with CSS. You can add the code to your theme’s style.css file or through a custom CSS plugin if you wish.

Here’s the code you need to add:

Replace the classes with your own, along with the image paths. The hashtags can be replaced with the correct values based on your file, but don’t change the zeros – they need to remain intact in order for the icons to display correctly.

You can also copy and paste the class socialSiteTwo for each additional social media icon you would like to add. You can also change the position, margin, padding and top to suit your specific styling needs.

Here’s a breakdown of this CSS example for quick referencing:

• #social a.social {height:#px;} – Replace the hashtag with the height of each icon and not the total height of the image.
• #social a.socialSiteOne {left:0px;} – This is where your first symbol begins at the very left of the image.
• #social a.socialSiteOne {width:#px;} – This is the width of your first social media icon. This number should also be the same for all your other icons.
• #social a.socialSiteOne {background:url('your-image.png') 0 0;} – The image is called and the position is set to zero pixels for both the left and top positions.
• #social a.socialSiteTwo {left:#px;} – Replace the hashtag with the pixel value of the position where your second icon begins in the image. If your first icon is 50px wide, then this value would be 51px.
• #social a.socialSiteTwo {background:url('your-image.png') -#px 0;} – Replace the hashtag with the number of pixels where the second symbol begins counting from the far left of the image.

If you included spacing in between the icons in the image you created, the left and background-position selectors will be the same. If you didn’t add spacing initially, the left selectors should be larger than your background-position selectors since you will need to account for the added spacing you want to add in pixels.

Now you can add the images that will be displayed on hover. You can add the following code below the above example as I have done here for simplicity’s sake or mix them together:

Replace the hashtags with the correct value just as we have done in the previous example. The first value is the number of pixels the icon is positioned from the left and the second number counts from the top.

Once you’re done, save the file and view your results.

Conclusion

You may need to do some extra tweaking of your CSS stylesheet to achieve your desired look, but you’re off to a great start with the code covered here.

If you would like to learn more about CSS to help style your icons, check out one of our posts From WordPress Beginner to Pro: 200+ Career-Boosting Resources and 35+ Resources to Become a Kick Ass WordPress Developer.

If you’re interested in boosting your site or network’s social sharing, check out some of our other posts: Increase Your Shares With These 5 Free WordPress Social Media Plugins, 50 Best WordPress Social Media Plugins (2020).

Editor’s Note: This post has been updated for accuracy and relevancy.
[Originally Published: May 2015 / Revised: April 2022]

How do you integrate social media into your site or network? Feel free to join the conversation and exchange tips and share your valuable experience in the comments below.

Tags:

• CSS
• social media