There is no doubt that humans are very visual beings. And as such, we focus not only on the content, but on the visual design of a website as well.

Traditionally, web designers and developers around the world used images and image sprites to include icons on any website.

Those icons were then used across the website as a visual enhancement – in the navigation menu, the search bar, loading icons in sliders, and similar.

However, as convenient as that method was, it also had a few downsides. Those downsides became obvious when responsive design came into play which then cause those images to appear cut off or even worse, completely blurry.

The answer to that problem is font icons. They display fully responsive and customizable icons which add a little extra to your website design. Essentially, they are fonts made of icons.

One such font is FontAwesome. And today, I’ll show you how to easily add FontAwesome icons to your WordPress website.

FontAwesome

What you will learn in this tutorial

  • What icon fonts are and why you should use them
  • How to add icon fonts into WordPress using plugins
  • How to add icon fonts into WordPress manually
Tutorial information

Difficulty: Intermediate

Time Required: 30 minutes – 1 hour

Content Management System: WordPress (self-hosted)

Tools Required: Better Font Awesome

Alternatives: None

Other Requirements: None

Summary of tutorial:

  • Option 1 – Adding icon fonts in WordPress using plugins
    • Step 1 – Install and activate
    • Step 2 – Adding your font icons
    • Step 3 – Customize your font icons
  • Option 2 – Adding icon fonts in WordPress manually
    • Method 1 – Adding code to your theme’s header.php file
    • Method 2 – Adding font icons to your WordPress theme’s directory

What are icon fonts and why you should use them?

Icon fonts contain symbols or pictograms instead of letters and numbers. They can easily be resized using CSS and they won’t increase your page load times, unlike previously used image sprites would.

You can use them to add icons to your navigation menus, feature boxes, post titles, and more.

There are several reasons why you should use an icon font other than visual appearance:

  • Font Icons are fully responsive – They’re essentially vector files which means they can scale to any size without losing quality.
  • Font Icons can be styled, positioned and manipulated – Since they’re fonts, you can manipulate them in the same way as you would a traditional font. Set their color, change their style on hover, control their alignments, set their size, and more.
  • Font Icons are highly cross-browser compatible and there are plenty of them.
  • Designers have spent numerous hours on these icons and they are updated frequently and aim to provide the best experience.

There are two ways to add FontAwesome to your WordPress website and we’ll go over both methods. The first method involves using a plugin and the second one involves adding the font manually.

Option 1 – Adding icon fonts in WordPress using plugins

Using a plugin is by far, the easiest method of adding any font icon to your website. In this example we’ll use Better Font Awesome to add the font to the website.

Step 1 – Install and activate

First thing you need to do is install and activate the Better Font Awesome plugin.

Navigate to your dashboard and then click on Plugins > Add New. Search for FontAwesome and then click on Install.

Lastly activate the plugin. Upon activation, you can visit Settings > Better Font Awesome page to configure the plugin settings. In most cases this is not needed as the plugin works out of the box, so you won’t need to change anything there.

Step 2 – Adding your font icons

Better Font Awesome allows you to add font icons using various shortcodes like this:

[icon name=”binoculars”]

[icon name=”gift”]

[icon name=”map”]

The icons can also be added in the post editor simply by selecting the desired icon. If you were to create a new post now, you’ll notice a new icon in your post editor. Clicking on it will bring up a popup where you can locate an icon and insert it.

Adding FontAwesome to a post

Step 3 – Customize your font icons

The plugin will add a shortcode in your post and if you want to further customize the icon, you can do so by adding your own CSS class to it, and then entering the specific styles in your stylesheet.

The default shortcode looks like this:

[icon name=”coffee” class=”” unprefixed_class=””]

Once you add a class for styling purposes it looks like this:

[icon name=”coffee” class=”” unprefixed_class=””]

Once you add a class for styling purposes it looks like this:

[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=””]

To style it, go to Appearance > Editor and open your theme’s stylesheet. Add the following lines to it:


i.fa.fa-coffee.fa-mycoffeeicon {

font-size:100px;

color:#ba1157;

}

It’s that simple.

FontAwesome in post

Now let’s see how to add FontAwesome manually.

Option 2 – Adding icon fonts in WordPress manually

Icon fonts are nothing more than fonts consisting of icons. As such they can easily be added just as you would add any custom fonts. Some icon fonts like FontAwesome, are available from CDN servers across the web and can be linked from your WordPress theme directly.

You can also upload the entire font directory to a folder in your WordPress theme and then use those fonts in your stylesheet.

Let’s cover both methods here.

Method 1 – Adding code to your theme’s header.php file

The easiest method is to include one line in your theme’s header.php file, just before the </head> tag.


&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /&gt;

Even though this is the easiest method, it’s not really the proper WordPress way and it can cause conflicts with other plugins. A much better approach is to properly enqueue the stylesheet in WordPress via your functions.php file.

Click on Appearance > Editor and then select your functions.php file. At the end, add the following lines:


function ala_load_fa() {

wp_enqueue_style( 'ala-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Once you’re done, click on update file.

Method 2 – Add font icons to your WordPress theme’s directory

The second method allows you to have the icons readily available in your theme and includes a bit of legwork. First, you need to download the icon font and unzip the package. Then, use a program like FileZilla to connect to your website via FTP.

Go to your WordPress theme’s directory, create a new folder and name it fonts or fontawesome.

Creating Fonts Folder in cPanel

Then upload the contents of the icon fonts to the folder you just created.

Uploading FontAwesome

Once that is done, you’ll need to add the fonts to your WordPress theme. Simply add this code to your theme’s functions.php file.


function ala_load_fa() {

wp_enqueue_style( 'ala-fa', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Click on update file and you will have successfully loaded FontAwesome into your WordPress theme.

The final part is actually adding icons into your WordPress theme, posts or pages.

You can do so manually by including the icon name anywhere you want it to display.

Go to Font Awesome’s website to see the full list of icons available. Click on any icon you want to use, and you will be able to see the icon name. Click on Copy to copy the icon name and then insert it in your post or page editor:


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

You can also customize the icon in the stylesheet like we’ve done above.

You can also combine different icons together and style them at once. This is useful if you want to for example create a list of links with icons next to them. Simply wrap them under a div element with a specific class like so:







<div class="my-icons">
<a class="icons-group-item" href="#"><i class="fa fa-apple fa-fw"></i>Home</a>
<a class="icons-group-item" href="#"><i class="fa fa-bars fa-fw"></i>Library</a>
<a class="icons-group-item" href="#"><i class="fa fa-asterisk fa-fw"></i>Applications</a>
<a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>






Now you can style them in your theme’s stylesheet like this:


.icons-group-item i {

color: #333;

font-size: 50px;

}

.icons-group-item i:hover {

color: #ba1157;

}

Final thoughts

In a previous tutorial, we’ve shown you how to add Dashicons to WordPress and how to use them. Adding FontAwesome is rather similar. It’s a great way to make your website more interesting and there are plenty of ways to use icon fonts.

You can use them to style your navigation menu, or add them to post titles. You can use them inside your posts, when you want to bring attention to something important.

You can even add them to your widgets since widgets accept HTML input. Consider how much more your newsletter widget could be if you added an envelope icon to it? Or if you use an author box, you could use FontAwesome to display your social media profiles.

The best part is that no matter which device or which browser your visitors are using, they will always be able to see crisp, responsive icons.

Posted by Ana Lynn Amelio

Ana Lynn Amelio is a WordPress designer and freelance blogger. When she isn't busy running her own small business Ley Design she can be found reading, enjoying Italian food, and helping her kids go through not-so-secret cookie stash. Follow her on Twitter or say hi on Google+