Icon Fonts

Posted

Overview

This tutorial explains how to output post meta (comments, tags, categories, edit link) and display a small icon before each one using an icon font. Icon fonts are great for this purpose because they can scale to any size, look great on retina devices, have a smaller file size than images, and use a single HTTP request.

Examples

An icon font I particularly like (and use in this demo) is Entypo by Daniel Bruce. There’s over 250 icon glyphs available in the font and the download size is only 19k. But there are a lot of great choices out there to use. (Update: the tags icon is now from FontAwesome)

Build a Custom Font

Since you’ll generally only need a couple of the glyphs in the icon font you use, I recommend using Fontello to trim the font down to what you need. In my theme, I only needed five of the glyphs- which took the download size down to 4k!

Fontello also allows you to remap the characters, generates all the CSS you need, and puts it into a nice little download package (for free!). I didn’t use the exact CSS Fontello generated, but it was extremely useful to get the ASCII number for the glyphs so that I could easily pop them into a :before psuedo element in my own stylesheet.

The Markup/Code

I’m about to paste in a big blob of code here that I use to output the post meta. What this does is:

  • Links to the comments section of the post and displays the number of comments (if there are any)
  • Outputs the categories the post is listed in, as long as there is more than one category on the site
  • Outputs the list of tags (separated by commas) if the post has any
  • Displays the edit link (for users with permissions to edit the post)

Most of this is ripped directly out of the _s theme, which I use as a base for most of my custom themes.

<footer class="entry-meta">
	<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
		<span class="icon comments-link"><?php comments_popup_link( __( '<span>Comment</span>', 'example' ), __( '1 <span>Comment</span>', 'example' ), __( ' % <span>Comments</span>', 'example' ) ); ?></span>
	<?php endif; ?>
	<?php if ( 'post' == get_post_type() ) :?>
		<?php
			/* translators: used between list items, there is a space after the comma */
			$categories_list = get_the_category_list( __( ', ', 'example' ) );
			if ( $categories_list ) :
		?>
		<span class="sep"> | </span>
		<span class="icon cat-links">
			<?php printf( __( '<span>Posted in</span> %1$s', 'example' ), $categories_list ); ?>
		</span>
		<?php endif; // End if categories ?>
		<?php
			/* translators: used between list items, there is a space after the comma */
			$tags_list = get_the_tag_list( '', __( ', ', 'example' ) );
			if ( $tags_list ) :
		?>
		<span class="sep"> | </span>
		<span class="icon tag-links">
			<?php printf( __( '<span>Tagged</span> %1$s', 'example' ), $tags_list ); ?>
		</span>
		<?php endif; // End if $tags_list ?>
	<?php endif; // End if 'post' == get_post_type() ?>
	<?php edit_post_link( __( 'Edit', 'example' ), '<span class="sep"> | </span><span class="icon edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->

Styling

Now that the markup is in place, we can style it with the icon font.

You’ll need to load the font at the top of style.css in your theme. In mine, I use a custom font generated by Fontello called “ExampleCustom”:

@font-face {
    font-family: 'ExampleCustom';
    src: url('fonts/example.eot');
    src: url('fonts/example.eot?#iefix') format('embedded-opentype'),
         url('fonts/example.woff') format('woff'),
         url('fonts/example.ttf') format('truetype'),
         url('fonts/example.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Below is the styling I used for the meta elements. Basically we’re just using a :before psuedo element to output the glyph character (e.g. content: ‘\270e’;). The characters will be different depending on the icon font use.

footer.entry-meta a {
	color:#555;
	text-decoration: none;
}
footer.entry-meta a:hover {
	color: #0a836b;
}
footer.entry-meta .sep {
	margin:0 8px;
}
.cat-links span, .tag-links span {
	width:0;
	display: inline-block;
	text-indent:-9999em;
}
.icon:before {
	vertical-align: -2px;
	color:#454545;
	font-family: "ExampleCustom", sans-serif;
	font-size:20px;
	font-size:2.0rem;
	margin:0 4px 0 0;
}
.icon:hover:before {
	color: #000;
}
.comments-link:before {
	content: "\e720";
}
.cat-links:before {
	content: "\1f4c4";
}
.tag-links:before {
	content: "\e70d";
}
.edit-link:before {
	content: '\270e';
}

The text for “Posted In” and “Tagged” would normally be displayed, but since I have an icon font to convey the message, that text is hidden with a “text-indent:-9999em;”.

Download an Example

If you want to play with a real life example, check out the theme I’ve been working on.

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

6 thoughts on “Icon Fonts

  1. grappler wrote:

    Looks good. It is just important to note that a theme with Font Awesome is not allowed on WordPress.org. Font Awesome is not GPL compatible.

  2. Based on requirements for a font heavy web app I am working on, we are only going to setup the woff and ttf format for each font.

    Check out the caniuse page for details:
    http://caniuse.com/#feat=fontface

    This approach does break on older versions of IE, but our HTML5 app won’t work there anyway and we are thankfully NOT supporting IE8 or below. I like only having to juggle 2 font files, instead of 4.

    Thanks for the tutorial!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>