Icons Fonts for Drupal Themes

Posted: August 28, 2012 under Drupal

Have you heard about icons fonts? Thanks to the folks at Apple and their new Retina displays, if you haven't, you soon will.

Why You Should Care About This

Here's the basic problem. When Apple introduced its Retina displays with the iPhone 4 (and now also on the iPad 3 and the MacBook Pro), they vastly increased the pixel density, essentially doubling them per square inch on the display. So imagine that you have a 100 pixel square icon. With a Retina display the icon would appear half the size it previously did due to the doubling of the number of pixels on the screen.

To compensate for this, Apple doubles the dimensions for the objects on the page - icons, divs, etc., and if you've worked with images before you can guess the effect this has - they become blurry.

In response, web designers have increasingly turned to vector graphics. Vector graphics, although not perfect, scale much better than traditional raster graphics like the GIF and PNG images we all know and love. And a really great way to implement useful vector graphics is through icon fonts.

Installing Icon Fonts in a Theme

For this example, I'm going to use the Zocial icon set. You can get these yourself from Smashing Magazine or directly from GitHub. What we'll have in the end is a slick (and large) set of social icons that will scale in the same way as any other font, thus avoiding the "fuzzy icon" effect that is so prevalent on Retina displays. Remember, although they look like images, they are not. These icons are actually a form of typography - kind of like a dingbat font.

This is what you'll have after downloading the Zocial files to you local machine:

icon fonts zocial

You'll see that we have a css file and our icon font in four flavors to make sure it plays nicely with all the different browsers out there. The next step is moving these files to the theme folder you are working with.

To keep things as simple as possible for this example, we're just going to assume that everything is in the root folder for your theme. In actual practice, you would place the CSS file wherever your theme has its stylesheets and if you didn't have a place for your web fonts, you would create a folder for them as well.

Once you have the files in place, you need to go to your template.php file and add the following snippet of code:

drupal_add_css(drupal_get_path('theme', 'YOUR_THEME_NAME') . 'zocial.css', array('group' => CSS_THEME, 'type' => 'file'));

In the above snippet you replace YOUR_THEME_NAME with the name of your theme and if you've placed the CSS file in a different folder, be sure to indicate that as well. For example, if you use the default folder structure for Omega theme, the zocial.css file will be in '/css/zocial.css'.

Now we're ready to use our font. Putting them in a block is probably what most of you will want to do and you're going to love how easy it is to add an icon. Here's the markup for Facebook:

<a class="zocial icon facebook" href="#">Connect on Facebook</a>

If you wanted to add Twitter, just swap out the 'facebook' class with 'twitter'. To see the markup for the other button and icons, refer to the sample HTML file that comes with the download.

If you want to make the icons larger or tweak them in some other way, just edit the CSS and manipulate them the same way you would any other text.

If you're interested in a more thorough explanation of Retina, this article is a good start. If you know of some good icon font sets, please share in the comments.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.