How to Add Font Awesome to WordPress Website

Are you struggling to add font awesome to WordPress website?

Icons play an important role in UX of any website. Icons add visual styles to improve the experience of visitors.

In this post, we will show you how to add font awesome to the WordPress site.

Unfortunately, you can’t simply add the font awesome icons in WordPress. Instead, you have to complete a step by step setup to add icons to your website.

That’s what this guide is all about. When you finish reading this guide you will be able to

What is Font Awesome?

Font Awesome is a popular and modern looking set of web icons. This set contains thousands of different icons which you can use in WordPress.

Font Awesome Website

Font Awesome fonts are great because they are just like other fonts. That’s mean they are :

  • Vector-based (so you don’t have to compromise on the quality of icons when changing the size)
  • Cross-browser compatible
  • Easy to style (just like any other font)

How Icons Like Font Awesome Improve the Usability

Icons not only improve the look of your website but also leave a great impact on the usability of a website. Research has proved that using icons on your website to improve user experience and increase your CTR (Click Through Rate).

When you use icons on your website like Font Awesome icons, you are not only improving the look of your website but also:

  • Making easier for the user to navigate. Using icons on your website will increase the click-through as users will be navigating on your site easily especially on touch devices.
  • Internationalizing your website. As English is not used everywhere in the world, some countries prefer to use their own native languages. Using icons on your website make it easier for the people who can not read English properly.
  • Icons use less space. Icons use less space than text and it has become more important as the majority of users visits websites from their mobile devices which have less space to show content.

Research also says that icons alone can confuse visitors. But when you use them as a part of webpage structure it will increase the usability and make your webpage more appealing.

Add Font Awesome to WordPress using Stylesheet

You can add Font Awesome to WordPress website using a plugin which is a quick way to accomplish this task. We will cover that in the next section, in this section we will show you how you can manually add the Font Awesome icons to your website (Our preferred way to add font awesome icons).

All you need to do is add the font awesome stylesheet to your WordPress theme and then style your icons using CSS.

Believe us, it really a simple steps formula. Let’s dive in!

Enqueue Font Awesome Stylesheet in Functions.php

The Font Awesome stylesheet is a CSS file which lists all the latest icons. You can add this stylesheet to your website using below two methods.

  1. Download Font Awesome Stylesheet from Here and upload the file to your website via FTP.
  2. Add Font Awesome stylesheet using Bootstrap CDN. (our recommended method)

No matter which option you choose to add Font Awesome stylesheet, below instructions will stay same. Jus the URL of stylesheet will be different based on the method you choose.

Then all you have to do is enqueue stylesheet in your Functions.php file. Simply copy the code below and paste it in the functions.php file.

If you have hosted Font Awesome stylesheet on your own server then you have to replace the Bootstrap CDN path with your own stylesheet URL.
add_action( 'wp_enqueue_scripts', 'enqueue_load_font_awesome' );
function enqueue_load_font_awesome() {
wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Some people will still use the old school approach by adding the stylesheet URL in the header.php.

DON’T DO THAT

Enqueueing the stylesheet is the proper way of doing that.

Adding Font Awesome to WordPress Page or Post

Once you have added the stylesheet, using icons in WordPress is quite simple. Just use the code below to show any icon anywhere within the post or page content.

<i class="Enter icon name here" aria-hidden="true"></i>

You will be wondering, where I can find the icon name?

Head to Font Awesome Icons website and search for the icon you are looking for. When you have found the icon you want to add to your website click on it and it will take you to its dedicated page.

Font Awesome Icons Search

Font Awesome Icons Search

Scroll down and you will be able to find the HTML code to add this icon to your website.

Font Awesome Icon HTML Code

Font Awesome Icon HTML Code

If you are going to use copy-paste, then make sure you paste the code in text editor not the visual editor of WordPress.

Add Font Awesome to WordPress using a plugin

If you are a person who doesn’t have any programming knowledge and doesn’t want to mess up your WordPress website’s theme, then you can use a plugin to make your life easy.

There are many plugins available in the WordPress Repository, but we will recommend using Better Font Awesome.

Better Font Awesome

Better Font Awesome

We really don’t think that plugin for adding Font Awesome will save any of your time.

The first method of adding it manually is relatively simple apart from using Better Font Awesome plugin will add a shortcode editor which you can use to quickly add fonts to your posts and pages.

Better Font Awesome plugin is easy to install and its free. You can quickly search for it and install it from the WordPress dashboard.

Add Plugin Better Font Awesome

Add Plugin Better Font Awesome

Once you have installed and activated Better Font Awesome plugin, jump straight to your posts section and you will be presented with a Better Font Awesome shortcode button on the editor’s toolbar.

Better Font Awesome Shortcode

Better Font AwesomeShortcode

Just click on it and search for the desired icon to add it to your content.

You still have to style your icons using CSS that is why we don’t find the plugins very helpful than the manual option.

Wrapping Up

Adding Font Awesome to your website will improve the usability of the website and make it easier for your users to navigate.

We personal preference is to add Font Awesome manually by enqueuing the style sheet in the functions.php file.

But if you are not good at coding or don’t want to add Font Awesome permanently to your WordPress website then you can utilize a plugin.

If you have any question or suggestion please leave it down in the comments section.

Leave a Reply