How to install Font Awesome icons in WordPress

Font Awesome icons is 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 icons 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 a different non-web related projects. In this article, we’re about to focus on installing Font Awesome Icons on you WordPress website.

What’s so great about this icon package is that you can easily change their 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 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 <head> part of your header.php file:

<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”>

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 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 <head> section, add the following:
  5. <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>

  6. Change path to one located on your server
  7. Save changes

Use one of available WordPress plugins

There are different WordPress plugins which will install Font Awesome plugins for you and allow you to use them easily anywhere in your site. One of the most popular plugin for the job is Font Awesome 4 Menus which lets you insert icons both in WordPress navigational 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 some of the examples on how to use Font Awesome Icons.

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 *