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