We all love awesome CSS3 buttons, right? Well I see a lot of people wanting to put awesome icons in their awesome buttons – making them even more awesome. Well let’s take it up another level of awesomeness and add icons that are infinitely scalable and don’t use images. How awesome is that?
Excited yet? This is accomplished by using a font format. Ewww, what’s the point of doing that?
Well with the introduction of the Retina/HiDPI displays your icons using sprites or single images might not look so awesome. This is a simple and very flexible way of making sure your awesome buttons look, well, awesome. And if you’re a nerd like me, it’s the mainstream thing to do.
As I mentioned, this allows for infinitely scalable icons – well that’s not all. It’s also easier to manage than dealing with a lot of individual images or sprites, can be styled using CSS, and using a single font file will only require a single HTTP Request for all your icons (if the icon set you are using includes all the icons you will be using).
This tutorial is a continuation of Brian Gardner’s How to Create CSS3 Gradient Social Media Buttons. So if you haven’t already – go through Brian’s tutorial and then come on back to see how to add your icons.
From here on out i’m assuming you already have some buttons that look similar to this (without the icons of course):
DribbbleFacebookGoogleLinkedInPinterestRSSTumblrTwitter
Snazy, huh? Let’s dive in!
First things first – we need to pick an icon-set to use. Since this is for social media buttons I’ve decided to utilize the icon font from the amazing Zocial CSS Social Buttons by Sam Collins, which you can download here.
For the sake of this tutorial, we won’t be using the original zocial.css file. I’ve created a much smaller version just for our few little buttons that Brian has helped you create. The entirety of Zocial is awesome (has a social button for just about anything you can think of) and I highly recommend you try out the original buttons when you are done with this tutorial and hopefully have a better understanding how it all works.
Let’s get back to it.
1. Download the 4 font files and my modified version of the zocial.css file.
Right click and Save As to download -> Modified Version of zocial.css
2. Upload all five files to your server (zocial-regular-webfont.eot, zocial-regular-webfont.svg, zocial-regular-webfont.ttf, zocial-regular-webfont.woff and our modified zocial.css file). For this example, I dumped them all into my child theme’s folder.
3. Now we need to link to our zocial.css file.
There’s a few ways to do this, but we’re going to use the method WordPress recommends. I also like to keep all the heavy lifting in my functions.php file – so that’s where we’re gonna make the magic happen. It’s also a nice little side tutorial on how to properly register/enqueue an additional external stylesheet for use with your child theme. (:
Add the following to your theme’s functions.php file:
/** Register and enqueue Zocial */
function add_zocial_style()
{
wp_register_style( 'zocial', get_stylesheet_directory_uri() . '/zocial.css', array(), '20120208', 'all' );
wp_enqueue_style( 'zocial' );
}
add_action( 'wp_enqueue_scripts', 'add_zocial_style' );
4. That’s it. Your buttons should now auto-magically have the proper icons assigned to them. How cool is that?
This is accomplished using a CSS pseudo element you may have overlooked named content, which actually doesn’t select anything – but instead adds something to the page. It can only be used with the pseudo elements :before and :after. In this case, we are using these elements in the zocial.css file to allow us to insert our icons before our text for each specific button.
/* Button icon */
/* Icon characters are stored in unicode private area */
a.button-dribbble:before {content: "D";}
a.button-facebook:before {content: "f";}
a.button-googleplus:before {content: "+";}
a.button-linkedin:before {content: "L";}
a.button-pinterest:before {content: "1";}
a.button-rss:before {content: "R";}
a.button-tumblr:before {content: "t";}
a.button-twitter:before {content: "T";}
Pretty awesome!
On a sidenote – if you notice we have some CSS for our buttons in both style.css and zocial.css. Obviously, you can leave it that way – but if you wanted to you could move your original button CSS over into the zocial.css file and keep everything nice and tidy. You can reference styles across either stylesheet. For instance, the code above is in the zocial.css file and is affecting our button code that is specified in style.css.
Bonus: Let’s make these buttons even more awesome.
Remember how I said the icons were infinately scalable? Let’s tweak a little bit of Brian’s initial CSS to scale the whole button by just changing the font-size!
In your theme’s style.css file, edit the button code so it looks like this:
a.button-dribbble,
a.button-facebook,
a.button-googleplus,
a.button-linkedin,
a.button-pinterest,
a.button-rss,
a.button-tumblr,
a.button-twitter {
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
box-shadow: 0 1px 1px #999;
color: white;
display: inline-block;
font-size: 100%;
margin: 0 20px 20px 0;
padding: .65em 1em;
text-align: center;
width: 8em;
}
Now go and change up one of your buttons font sizes like so:
<a class="button-twitter" style="font-size: 14px;" href="#">Follow me</a>
Now let’s crank it up to 60px.
Check that bad boy out!
Now go get a little crazy styling your buttons!
Here’s a few good social icon font alternatives:
Socialico (free but requires a link back to site)
JustVector Social Icons Font (free)
Speak Your Mind