How To Add Font Awesome To WordPress

Font awesome is a great extension which allows you to add 400 plus retina display ready icons to your website.

There are mainly two different ways to add font awesome to WordPress websites. I mean you can either install a plugin or you can use a custom PHP function to load the main stylesheet.

Now if you are new to web designing and development then you might have few questions. What’s the need of using

What’s the need of using font awesome when you can use images?Why add an extra load to your hosting server?

Well, the answer to these questions is very simple, so as to improve overall user experience. One of the biggest problems with images is that they can’t be scaled to higher resolution as they loose their quality. In that case, you can use font based icons which can be scaled to infinite level without losing any visual quality.

Check out some great advantages of using font awesome:

• They are retina display ready.
• Load faster as compared to images.
• Can be customized using CSS.
• Can be scaled to infinite level.
• Supports various brands logos like facebook, twitter etc.

I don’t think these many options are available with image based icons.

How To Font Awesome To WordPress

In this tutorial, you will be editing your theme directory and its styles, so as a precaution I will suggest making complete backup of your site. Although there won’t be any problem in the normal functioning of your site if you make small mistakes. But if you somehow break the theme then your website will go down until you restore the back.

The best way to test font awesome icons with your site is by testing it on localhost. Read this tutorial on how to install WordPress locally on windows with xampp.

Step 1

Before we proceed to the installation process, you will have to first download font awesome. Please follow the procedure as listed below.

• Visit the official website to download the compressed folder.
• Now either use the FTP or Cpanel file manager to reach your theme’s directory.

The folder path should be like this; domain/wp-content/themes/your current theme folder/

• Now upload the font and CSS folder which is inside the compressed font awesome folder to your theme’s root folder.

This is essential step since the PHP function will retrieve the CSS from your theme’s directory. So please follow this step properly and if you face any problem then please consult me in the comment section.

Once you have completed this step properly move to the next step.

Adding The PHP Function – Step 2

/**
 * Function To Load Font Awesome To WordPress
 */

add_action( 'wp_enqueue_scripts', 'vkp_enqueue_font' );
function vkp_enqueue_font() {
	if ( !is_admin() ) {
		wp_enqueue_style( 'vkp_enqueue_font', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.0.3' );
	}
}

Now it’s time to move to your WordPress administration panel. Now copy the above snippet to your theme’s function.php file. That’s all, now your website will automatically load the stylesheet located inside your CSS folder.

Use Free Font Awesome CDN Service

If you want to speed up your website then you should use CDN services. But if you don’t have CDN then you can use the free service from maxcdn to load your font-awesome fonts for free. There is no harm using this service if you already use any CDN from any other service provider. This service will only help to preserve your bandwidth.

There are some great benefits of using this service.

• All the CSS will be loaded from hundreds of servers located all around the world.
• This service will help to reduce your website’s bandwidth usage and server load.
• Your website will load faster.
• CSS files are already compressed to even boost the speed.

Now if you want to use this free service then leave step 1 and step 2.

You have to just copy the PHP function listed below to your theme’s function.php file and save it.

add_action( 'wp_enqueue_scripts', 'add_fonts_cdn' );
function add_fonts_cdn() {
	wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
}

Now you can refresh your website and if you are using any caching plugin then flush all your caches to view the changes.