How to Use Icon Fonts in WordPress

One solution to these problems is using an icon font. Icons are vectors so you can scale them infinitely and a lot of icons can fit inside a tidy little package which consists of a single file, bringing down your request count considerably. In this article, I’ll show you how to use icon fonts in WordPress easily.

Where to Find Icon Fonts

Just typing “icon font” into Google will yield some great results, my favorite being FontAwesome. Right now it has 585 icons which include interface, social, arrows, and many other types of icons.

Fontello is another great service that helps you discover and built icon fonts. As I mentioned, font icons use a single file, a font face, to add icons. The premise of Fontello is that you can further streamline this by creating font files that contain only those icons that you need in the project.

This can bring down the file size from 150kb to a couple of kilobytes only, pretty handy! Even better: you can mix and match icons from various font sets.

Including Icon Fonts in Your Project

Using a font icon involves attaching the font file to your project, then using CSS to load the font face, then creating some markup to add the icons in the correct place. Let’s look at a simple manual implementation which can be used in any system.

While your site will load a single file, you’ll actually end up having a number of file formats for each font since some browsers utilize different formats. FontAwesome has 6 different file formats included: eot, svg, ttf, woff, woff2 and otf. Your first task is adding these files to your project directory somewhere, perhaps in a fonts directory.

Next, add the FontAwesome css file into your project and add it to your website using a regular old link element.

<link rel="stylesheet" href="css/font-awesome.min.css">

If you look at the unminified version of this file you can see what’s going on in the background. The font files are loaded, the basic element with the class of .fa is defined (along with some others), and finally, each named icon is defined (eg: .fa-book).

The only thing you need to be mindful of is the path to your font files. By default they are loaded from ../fonts which will be the fonts directory, one folder up from the current CSS file. You may need to change this to fit your own directory structure.

Once you’ve done all that you can include fonts by adding some markup to your site:

<i class="fa fa-fire"></i>

FontAwesome has built-in support for different icon sizes, rotating icons, bordered, pulled icons and much more. Take a look at the examples page for a complete list of features and their markup.

Keep in mind that you can use any element, not just i. You can use regular span elements as well, in addition to adding CSS to your custom classes.

Accessibility Concerns

One downside of icon fonts is their horrible accessibility. Screen readers may skip them, or worse yet, read the unicode or the character itself. This would result in visually impaired people hearing “yellow star favourites” when looking at your favourites menu item – not ideal. You should also take into account what happens if the fonts don’t load.

Ideally you would want decorative icons to simply disappear when not loaded and critical icons to be replaced with text if there is an issue.

The accessibility issue is fairly easy to take care of, simply use the aria-hidden="true" parameter and value to indicate to screen readers that they should discard our element.

<span class="icon icon-star" aria-hidden="true"></span> My Favourites

In a more complete implementation you can also use Modernizr to test for font face support. You’ll need to modify the CSS slightly, see the excellent Bulletproof Font Icons article for more in-depth information.

For information about creating critical icons with text fallback I would also recommend reading the article above, they have explained and solved the issue as best as possible, but implementing it is a bit out of the scope of this article.

How to Use Icon Fonts In WordPress

There are three ways to use icon fonts in WordPress. You can include your own in your theme or plugin, use the built-in Dashicons set or use a plugin to give you access to a font icon; let’s look at all three.

Including Your Own

The process is very similar to the manual way, but we’ll use WordPress’ enqueueing to add our CSS file. Add the following to your theme’s functions file to gain access to FontAwesome (don’t forget to add the font files).

function my_theme_styles() { wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/font-awesome.min.css' );
} add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

Using Dashicons

Dashicons is included by default since WordPress uses it on the backend. You’ll need to enqueue it on the front-end, but all you need is the name of the script, the file is already available to WordPress:

function my_theme_styles() { wp_enqueue_style( 'dashicons' );
} You can then go to the Dashicons website, select an icon and click the "copy HTML" link which will give you the code you need to display the icon:

<span class="dashicons dashicons-no"></span>

Using Plugins

There are numerous plugins to get this done, one of them is FontAwesome.io Shortcodes. Once installed and activated you can use [fa icon=""] to add an con anywhere within your content.

This is a good solution if you want to let your clients add icons to posts or pages, but if you want to use these elements within your theme or plugin it’s best to enqueue them yourself.

Summary

That’s all there is to icon fonts. They still have a way to go until they achieve full accessibility more easily, but you can already use them with confidence. I would very much recommend using Fontello to construct an icon font that consists of only those icons you use. This will make your theme considerably more streamlined!

If you have a favorite font icon that isn’t FontAwesome let us know, there are a fair number of good ones out there!