WordPress
Article

Using Font Awesome with WordPress

By Simon Codrington

Web Icons

Users today are focused just as much on the visual design of a website as they are about the content they need from it.

Traditionally designers and developers have used individual images/sprite-sheets for their icons; these graphics were a series of pixel perfect images that would be used in specific parts of the site (such as the search bar, navigational elements, loading icons and other elements).

Displaying icons with images/sprites worked well for a long time (and many websites will still use them). However, with the focus on responsive design more important than ever, the challenge has been providing stunning iconography that looks great regardless of your device.

What Are Font Icons?

Font icons are a way in which we can display fully responsive, customizable icons on our website without the use of additional images or sprite-sheets.

Font Icons are exactly what they sound like, a font made of icons.

Font Awesome Icon Examples

Where a normal font defines characters such as ‘a’, ‘b’, ‘c’, an icon font defines characters that are symbols such as the search symbol, the menu toggle symbol and a whole heap of others all in one font.

Why Would I Use Font Icons?

Traditional images have worked well historically; however icon fonts give us a greater amount of flexibility and let us more easily manage our icons.

  • Font Icons are fully responsive

    • These icons are vectors and can be scaled to any size without any loss of quality.
    • Traditional images are raster images and created at a set size/dimension (usually based on a grid such as 48×48) These images can look awful when resized or when viewed on a high resolution device.
  • Font Icons can be styled, positioned and manipulated

    • With font icons you can control them as if they were fonts; you can set their color, background color, text alignment, line height and other attributes to style them using CSS
    • Traditional images don’t give you fine control. If you want an image to be slightly different in color or size you will need to upload a different image
  • Font Icons are highly cross browser compatible and there are heaps of them
    • Font Icons have deep compatibility all the way back to ancient browsers (I’m looking at you IE6)
    • There are dozens of great icon fonts that designers have spent countless hours on; these fonts are usually updated frequently and refined to provide the best experience.

Here is a random example of an icon font; no images required.

Font Awesome Example

With all the great free icon fonts there is very little reason to use traditional images anymore. However there are still some debatable downsides.

  • Browser and OS differences

    • Because these are fonts its up to the browser how it renders the icons (there is subtle variations between OS’s, browsers and different versions of the same browser). Traditional images look the same regardless of what they are viewed on.
  • Not every icon exists

    • Designers have covered most of the icons you will need in your projects; however not all icons have been created and you may find yourself having to rely on images in some situations

Getting Font Awesome into Your WordPress Project

Integrating Font Awesome with WordPress, be it a theme or plugin, is exceptionally easy and requires very few steps to get up an running.

There are dozens of icon fonts to use, but for this tutorial I will be using Font Awesome as they have hundreds of really amazing icons. We will be using version 4.3 of Font Awesome.

Use a Local or External Copy of Font Awesome

There are two main options for getting Font Awesome in your project; you can either load the files on your web server or just link to the externally hosted stylesheet.

Download Font Awesome and Include the Fonts/CSS Manually

Click the download link and get the zip file from their homepage. Inside the zip file you will see the fonts and the required CSS file (there are also LESS/Sass files but we are not going to be using them).

Your zip file should have the following resources that you will need to move over to your project (move them into their own applicable directories via FTP). Create a directory in your theme or plugin called ‘fonts’ and another called ‘css’ and move the files into these directories.

Go into your themes functions.php and create a new function that we will use to load our stylesheet. Create a function and attach it to the wp_enqueue_scripts action. Once you have this function call the wp_enqueue_style function and load your stylesheet.

//enqueues our locally supplied font awesome stylesheet
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Hosting with a third party makes the process that much easier; all you need to do is create a function inside your functions.php file and attach that function to the wp_enqueue_scripts action. Inside this function you will just enqueue the stylesheet (except this time you will reference the externally hosted link):

//enqueues our external font awesome stylesheet
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

How to Use Font Awesome (and Icon Fonts in General)

Font Awesome can be used in two ways, which way you want to utilize is completely up to you.

A Pseudo Element (a CSS Method)

Using a pseudo method for adding your icon involves using the :before or:after pseudo CSS selectors to style your desired HTML element.

What you do is determine the element you want to apply your icon to and create a CSS style either before or after the element and manually set the icon that will be used (along with its style and design).

Each font in an icon font set has a unique code that represents the icon; this code is Unicode and tells the browser that you want to display the character that corresponds to this code. You would create your pseudo element and set its font to use your font icon family, you would then set its content value.

The main properties you need to set are content and font-family to their respective values (so that the pseudo element will appear).

Button Example

<!-- Here is the styling -->
<style>

.my-button{
	display: inline-block;
	padding: 8px 12px;
	background: #eee;
	border: solid 1px #D5D5D5;
}
.my-button span{
	display: inline-block;
}
.my-button span:before{
	font-family: 'FontAwesome';
	content: '\f085';
	position: relative;
	margin-right: 5px;
	font-size: 110%;
}


</style>

<!-- Here is the HTML markup -->
<div class="my-button">
	<span class="text"> Settings Menu </span>
</div>

Here is a sample of the output:

Font Awesome Button Example

Since we wanted to display the multi gear icon we used to Unicode for that icon. Each of the Font Awesome pages will show the Unicode reference you need to include; this example the Unicode is \f085 as indicated on its sample page (http://fortawesome.github.io/Font-Awesome/icon/cogs/).

  • Pros
    • You can be very specific with your designs; you set the sizing, line height, colours and styles you exactly want
    • Don’t need to use an extra HTML element just to generate an icon (you can apply this directly to another element such as a H1 or div and then position it around the element)
  • Cons
    • Need to set everything up manually (we can’t just use a predefined Font Awesome class to make everything bigger or rotated etc)
    • Difficult to target with JavaScript/jQuery (since you are using a CSS method on an element, if you wanted to target an element and change an icon / swap it cant be done; this is because you can’t target pseudo elements)
    • If Font Awesome updates their Unicode references and you update the stylesheet you might need to re-enter the Unicode values)

An Inline Element (a HTML Method)

The simplest way to use Font Awesome is to assign the Font Awesome classes to an element.

When you use a font icon this way it will generate a pseudo element before/after the targeted element and generate the styling for the icon.

If you want to display an icon you need to assign the fa class to an item (generally elements such as i and span work the best). This class connects your item to the Font Awesome font.

Once your item has the base fa class you can then add the class name that corresponds to the icon you are trying to display; for example if you wanted to display the camera icon you would also add the fa-camera-retro class. Choosing this corresponding icon class will look up the icon font and display its unicode character (its glyph):

<!--outputs a camera icon-->
<i class="fa fa-camera-retro"></i>

Which would render something like this:

Font Icon Example of Camera

Once you have your icon rendering you can create more fancy elements using additional Font Awesome classes to apply sizing, rotations, colours and styles.

You could build a simple navigation menu using the predefine Font Awesome classes and styles:

<!-- CSS for the menu -->
/*Base styles for a drop down*/
.nav-list .nav-item{
	display: block;
}
.nav-item .nav-link:first-child{
	border-top: solid 1px #ccc;
}
.nav-item .nav-link{
	display: block;
	padding: 8px 12px;
	background: #eee;
	border: solid 1px #ccc;
	border-top: 0px;
	color: #333;
}
.nav-link > i {
	margin-right: 10px;
}
<!--HTML for the menu -->
<nav class="menu">
	<div class="nav-list">
		<li class="nav-item">
			<a href="/" class="nav-link">
				<i class="fa fa-home fa-fw"></i>
				<span>Homepage</span>
			</a>
			<a href="/users" class="nav-link">
				<i class="fa fa-user fa-fw"></i>
				<span>Our Users</span>
			</a>
			<a href="/tags" class="nav-link">
				<i class="fa fa-tag fa-fw"></i>
				<span>View Tags</span>
			</a>
		</li>
	</ul>
</nav>

This would generate a simple vertical navigation menu as shown below:

Vertical Font Awesome Navigation

Stacking Icons Example

You can also stack icons together to create different looks.

As an example lets create a series of social media buttons:

<!--Basic CSS styling -->
.social-bar {
	text-align: center;
}
.social-bar .header{
	display: inline-block;
	margin: 0px 7px 0px 0px;
	border-bottom: solid 1px;
	font-size: 110%;
}
/*holds the front and back icons*/
.social-bar .icon{
	display: inline-block;
}
/*back (square) of the stack*/
.social-bar .icon > .back{
	background: #333;
}
/*Front (icon) of the stack*/
.social-bar .icon > .front{
	color: #fff;
}
<!--HTML for the social media elements -->
<div class="social-bar">
	<p class="header">Join our social media </p>
	<a href="https://www.facebook.com/">
		<span class="icon fa-stack fa-lg">
			<i class="back fa fa-square fa-stack-2x"></i>
			<i class="front fa fa-facebook fa-stack-1x"></i>
		</span>
	</a>
	<a href="https://twitter.com/">
		<span class="icon fa-stack fa-lg">
			<i class="back fa fa-square fa-stack-2x"></i>
			<i class="front fa fa-twitter fa-stack-1x"></i>
		</span>
	</a>
	<a href="https://www.pinterest.com/">
		<span class="icon fa-stack fa-lg">
			<i class="back fa fa-square fa-stack-2x"></i>
			<i class="front fa fa-pinterest fa-stack-1x"></i>
		</span>
	<a>
</div>

You should see a series of social media icons that look like this:

Font Awesome Stack Example

Stacked icons work by wrapping your icons around another element and applying the fa-stack class to it.

The icons that you want to stack will need to use the stack class also. You can specify the sizing you need by using the size classes such as fa-stack-1x and fa-stack-2x so that they stack correctly together.

  • Pros
    • Very simple to use. Apply the Font Awesome classes you want and then you will see your icon
    • You can target the element itself with JavaScript/jQuery, meaning you can then add classes or remove classes to change and alter the icon displayed)
    • Many different styles and actions to choose from including stacked icons, animation, sizing and positioning. All of these have been tested to ensure they work well and cross browser complaint (you don’t have the headache of testing it all yourself)
    • Easy visual representation in the HTML to show that you are using an icon (pseudo elements can be overlooked if they are just defined in the CSS)
  • Cons
    • If you require more precise control you need to apply additional styles / over-ride the Font Awesome Classes

Conclusion

Now that you know the fundamentals of getting icon fonts to work in your project, you can expand your designs and hopefully remove older image/sprite based icons in favor of these new fully responsive techniques.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in WordPress, once a week, for free.