Add Social Media Icons To Your Site Without Images

social-media-expertWhat if I told you there is a way to add social media icons to your website that doesn’t require image files, scales for any screen size or pixel density and is even easier to use than images?

The problem is that images are slow, inflexible and just an all around hassle to handle on most websites. Sure, you can create a sprite to make it a little easier but creating, maintaining and, in some cases even using that sprite can be an exercise in futility if you aren’t intimately familiar with CSS. To complicate matters, if you don’t use a sprite you have to download a separate resource for each and every image you use and possibly another separate set of images if you need to resize the images due to screen size or pixel density.

Fotunately there is a better way.

FontAwesome, a free package by Dave Gandy, puts together 361 different icons including every major social media network, into a single font that can be scaled and used very easily with a little CSS (it is what I use for the icons on the top right corner of this site).

While there is a plugin that you can use to add FontAwesome to WordPress I’m going to show you a better way to do it. We’re going to add it directly to your theme to avoid any unnecessary overhead and make it easy to update when the next version comes out.

1.) Download FontAwesome and extract its contents.

2.) Copy the Font and CSS folders to your theme folder. If you already have a these folders in your theme just copy their contents from the FontAwesome package to your own folders.

3.) Add FontAwesome to Functions.php.

To do this we’re going to create a new function called load_fontawesome by entering the following lines into functions.php:

4.) Within the function we just created we need to register our FontAwesome CSS and add it to the scripts queue so WordPress can use it. To do this take the function you created in step 3 and add the wp_register_style and wp_enqueue_style functions as you see below:

The wp_register_style code tells WordPress there is a stylesheet called fonts-awesome and it uses the font-awesome.min.css file in the css folder within your theme. Then the wp_enqueue_style tells WordPress to actually use the style by putting it in the header of your WordPress pages.

5.) Hook the load_fontawesome function into WordPress.

Finally we need to tell WordPress when to run our function. We’re going to do this using the WordPress add_action function to tell it to load our function when WordPress processes all of our scripts and stylesheets. To do this we just add one more line to our code:

6.) Start using icons.

FontAwesome is ready to use. To actually add an icon to our site find the icon you want on the FontAwesome site and remember the icon’s name next to its image. Then add it to your code with the i tag just like I’ve done for the Facebook icon in the code below:

The above code you should get you the following icon (note that you will need to switch to the text view in a page or post to make it work):

That’s it. You can add icons in the body of posts or pages, in widgets or anywhere else you need them. As a bonus, if the icon you want isn’t there today you may request it from the developer. The project seems to be updated regularly (they’ve added dozens of new icons just since May) so it looks as if there is a better than average chance your request could be accepted.

When you’re ready to update FontAwesome simply re-download it and copy the new CSS and font files over your existing files. It is that easy.

About Chris Wiegman

Chris is a developer for iThemes where he works on WordPress plugins such as Better WP Security. In past roles he has served as a teacher, blogger, manager and even an airline captain. He resides in Austin, TX with his wife Joy and their four-legged children.

Find Chris on Facebook, , LinkedIn, and Twitter.

Comments

  1. pdclark says

    Great article! It’s really important for people to know how to use FontAwesome and other icons by hand. :)

    One great lesson I learned about enqueuing FontAwesome while making the Menu Social Icons plugin was that even more load can be taken off your server, and your site can be made faster for your users, by linking to NetDNA’s version of FontAwesome instead of a copy in your theme folder. They list the URL’s here: http://www.bootstrapcdn.com/#tab_fontawesome

    Using NetDNA’s has the great advantage that if a user has been to any other site using their copy, the font doesn’t even have to reload — it’s already cached. If it does need to load, it downloads from their CDN, which provides a computer that is the closest possible to the end user.

    I know you mentioned there are plugins that add FontAwesome in general; Menu Social Icons targets a much more speicific use case: if users want social networks to be an icon in their WordPress menus, it can be a great quick fix. There’s no setup — just turn it on, and social links become FontAwesome icons automatically. Take a look! http://wordpress.org/plugins/menu-social-icons