Using Font Awesome with WordPress

This article was originally published in February 2015, and was updated in 2018 to adjust the version, as well as other minor edits and additions.

Web Icons

Users arriving at a website are focused as much on the visual design of a website as they are on the content they are hoping to find there.

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 in the search bar, on navigational elements, as loading icons, etc).

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 up entirely of icons.

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, but icon fonts give us a greater amount of flexibility and let us more easily manage our icons, and do so with responsiveness and ease.

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 48x48) These images can look awful when resized or when viewed on a high resolution device.

Font Icons can be styled, positioned and manipulated

• Font icons can be controlled as if they were typical 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 Cross-Browser and Abundantly Available

• 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.

With all the great free icon fonts out there, very little reason exists to use traditional images for icons anymore. However, there are still some debatable downsides to icon fonts.

• Browser and OS differences - Because these are fonts, it's up to the browser how it renders the icons (there are subtle variations between each OS, between browsers, and even between different versions of the same browser). Traditional images, however, 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 imaginable have been created, and so you may find yourself having to rely on images in some situations.

Getting Font Awesome into Your WordPress Project

Font Awesome is included in thousands of projects across the Internet, including WordPress themes (such as SitePoint's own Base Theme) and plugins. Integrating Font Awesome with WordPress, be it a theme or plugin, is exceptionally easy and requires just a few steps to get up and 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 5.4 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 on a CDN.

Download Font Awesome and Include the Fonts/CSS Manually

Click the download link on the Font Awesome home page and get the zip file. 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 theme's 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.

[php]
//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');
[/php]

Link to a Hosted CDN

Hosting with a third party CDN 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):

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

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

Font Awesome can be used in two different ways. Which way you implement it is completely up to you, and the needs of your project.

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, and 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).

The post Using Font Awesome with WordPress appeared first on SitePoint.