How to Add Font Awesome Icons in WordPress

Font Awesome icons are a set of scalable vector icons which have become a web standard. Instead of creating custom icons or having to find/buy a set of ones for your website, Font Awesome icons allow you to easily install, use and customize different icons from the database.

Icons can be freely used by anyone on their websites, themes, and plugins and you can even have the icons in different non-web related projects. In this short guide, we’re about to focus on installing Font Awesome Icons and using them on your WordPress site.

How to install Font Awesome icons on WordPress

Font Awesome Icons
What’s so great about this icon package is that you can easily change the size, position, color, shadow and that you can even animate all the icons with simple CSS styles which will transform your website into a modern piece of art if done correctly.

Before you can start customizing your icons, let’s see how to install them. Even though you can search for a WordPress plugin which can do the job for you, we think it’s actually easier to install the icons manually.

There are 3 different ways of installing Font Awesome Icons:

Link to the icons library:

Since there are icons already distributed on BootstrapCDN, all you have to do is to link to the right CSS file. After you do that, your website will look for icons on the network and will load them for you.

To make the icons work, you will have to put the following piece of code in the <head> part of your header.php file:

Download the icons and install them on your own server:

Instead of linking to the icons library like in the previous example, you can download the entire package and have it installed on your server. After you do that, you will need to link to a different path in order to get access to icons:

  1. Download the file from Github
  2. Upload the content to root folder of your theme
  3. Open header.php file
  4. In the <head> section, add the following:
  5. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  6. Save changes

Use one of the available WordPress plugins

There are different WordPress plugins which will install Font Awesome plugins for you and allow you to use them easily anywhere on your site. One of the most popular plugins for the job is Font Awesome 4 Menus which lets you insert icons both in WordPress navigation menus and anywhere else on the site.

Another plugin that can help you is Better Font Awesome which will also install the icons for you and let you use them anywhere on your site. Regardless the method you used to install Font Awesome Icons, you can’t say any of those were complicated or time-consuming. Instead of messing around with the installation, now you can go on and play around with different icons and their styles.

To get started, be sure to check the Font Awesome Cheatsheet and don’t forget to see to see the following examples.

How to use Font Awesome Icons

Once you’re done with the installation, let’s see how to actually display icons on your site.

Every icon has a unique name and you can display it by writing CSS “fa” prefix to it.

To show a simple icon without any customization, you will have to put a CSS class to an inline element. Although icons are often used as part of <i> tag, it would be better if you used them in <span> tag instead.

<span class="fa fa-camera-retro"></span>

All Font Awesome icons are made as scalable vectors which means that you can use different image sizes without losing the quality of displayed icon. There are several sizes already predefined so you can use one of the following classes>

  • Large size: <span class=”fa fa-camera-retro fa-lg”></span>
  • size 2x: <span class=”fa fa-camera-retro fa-2x”></span>
  • size 3x<span class=”fa fa-camera-retro fa-3x”></span>
  • size 4x<span class=”fa fa-camera-retro fa-4x”></span>
  • size 5x<span class=”fa fa-camera-retro fa-5x”></span>

Font Awesome Icons can be used anywhere. For example, if you want to change default bullets in unordered list, you simply have to add a class to your list

<ul class="fa-ul">
<li><span class="fa-li fa fa-check-square"></span>List icons</li>
</ul>

It wouldn’t be that much fun if you couldn’t change a color of your newly installed icons. So, yes, you can easily change colors for each icon simply by adding a new CSS rule in the style.css file. For example, you can easily paint cog icon red:

.fa-cog {
color: red;
}

Did you know that you can even animate your FA icons? If you use fa-spin class on your icon, it will rotate, and if you use fa-pulse class the icon will rotate in eight steps:

  • <span class=”fa fa-cog fa-spin”></span>
  • <span class=”fa fa-spinner fa-pulse”></span>

This will be just enough to get you going with your newly installed Font Awesome Icons. You can do practically anything with them and the only limit is your imagination. See a few more examples of what you can do with Font Awesome Icons (rotate them, flip them, stack them…) and once you’re done designing your own set of icons, leave a comment and show us your work.

Conclusion

As you can see from this short guide, installing Font Awesome icons shouldn’t be a problem. Once you get them on your site, you will be able to use more than 600 different icons in your menus, headers, posts, pages, and everywhere you want. You will just have to know the code for each icon.

How do you like Font Awesome? Have you added any icons to your site? If so, leave a comment and show us your work.

Start Blog Book

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *