How to Easily Add Icon Fonts in Your WordPress Theme

Do you want to add icon fonts on your WordPress site? Recently one of our users asked us what’s the easiest way to add icon fonts in their WordPress theme? Icon fonts they allow you to add vector icons without slowing down your website. In this article, we will show you how to easily add icon fonts in your WordPress theme.

What are Icon Fonts and Why You Should Use Them?

Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily resized using CSS without significantly increasing your page’s download size.

Icon fonts can be used to display commonly used symbols. On a typical website, you can use them for your shopping cart, download buttons, feature boxes, sliders, social media buttons, and even in WordPress navigation menus.

There are several free and open source icon fonts available with hundreds of icons. In fact, each WordPress install comes with the free dashicons icon font set. These icons are used in WordPress admin toolbar inside admin area.

Some other popular icon fonts are:

• Font Awesome
• Genericons
• IcoMoon
• Linearicons

For the sake of this tutorial, we will be using FontAwesome. It is the most popular, free and open source icon font available, and we also use it on our OptinMonster builder.

We’re going to cover two ways of adding icon fonts in WordPress. The first method will utilize a plugin, and the second one will show you how to add an icon font without a plugin.

Adding Icon Fonts in WordPress Using Plugins

FontAwesome and other free icon fonts are supported by many WordPress plugins. Using a plugin allows you to easily add an icon font to any WordPress theme without modifying any code.

First thing you need to do is install and activate the Better Font Awesome plugin. Upon activation, you can visit Settings » Better Font Awesome page to configure the plugin settings. However, the plugin works out of the box, so most users don’t need to change anything there.

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

[icon name="rocket"]
[icon name="cloud"]
[icon name="headphones"]

You can also add the icons in post editor by simply selecting an icon. Go ahead create a new post or edit an existing one, and you will see the Insert Icon button.

Clicking on it will bring up a popup where you can locate an icon and insert it.

You will notice that the plugin will add a shortcode in your post editor which will look like this:

[icon name="university" class="" unprefixed_class=""]

If you want to further customize the icon, then you can add your own CSS class to add custom styles.

[icon name="university" class="universityicon" unprefixed_class=""]

Now you can style the icon by using CSS in your theme or child theme‘s stylesheet.

.fa-universityicon { 
font-size:100px;
color:#FF6600;
} 

It’s that simple.

Now let’s take a look at how you can add icon fonts in WordPress without a plugin.

Adding Icon Fonts in WordPress Manually

As we mentioned earlier that icon fonts are just fonts and can be added to your site like you would add any custom fonts.

Some icon fonts like Font Awesome, 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.

Since we are using Font Awesome for this tutorial, we will show you how you can add it using both methods.

Method 1:

This is the easiest one. All you have to do is add this single line of code in your theme’s header.php file just before the </head> tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

This method is simplest, but it can cause conflicts with other plugins.

A better approach to load stylesheets or scripts in WordPress is to properly enqueue them.

Instead of linking to the stylesheet from your theme’s header template, you can add the following code in your theme’s functions.php file or in a site-specific plugin.

function wpb_load_fa() {

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

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Method 2:

The second method is not the easiest, but it would allow you to have the fonts inside your theme.

Simply download the icon fonts and unzip the package. Now you will need to connect to your website using a FTP client and go to your WordPress theme’s directory.

You need to create a new folder there and name it fonts. Next, you need to upload the contents of the icon fonts folder to the fonts directory on your server.

Now you are ready to load icon fonts into your WordPress theme. Simply add this code to your theme’s functions.php file or in a site-specific plugin.

function wpb_load_fa() {

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

You have successfully loaded Font Awesome into your WordPress theme.

Now comes the part where you will be adding actual icons into your WordPress theme, posts, or pages.

Manually Displaying Icon Fonts in WordPress

Go to the 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.

Copy the icon name and use it like this in WordPress.

<i class="fa-optin-monster"></i> 

You can style this icon in your theme’s stylesheet like this:

.fa-optin-monster { 
font-size:50px; 
color:#FF6600; 
}

You can also combine different icons together and style them at once. For example, lets say you want to display a list of links with icons next to them. You can wrap them under a <div> element with a specific class.

<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil 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: #FF6600
} 

We hope this article helped you learn how to easily add icon fonts in your WordPress theme. You may also want to take a look at our tutorial on how to add image icons with navigation menus in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.