How to use Font Awesome icon fonts in WordPress

I realize that some of you reading this tutorial may have never used an icon font before. You may even be asking yourself, what exactly is an icon font? Icon fonts are simply another way of displaying icons on your websites.

In the past, it was a common practice to use images as icons. But using images for icons usually results in additional requests to the server. So to address this problem, designers have turned to icon fonts.

An icon font is exactly like a normal font. The only difference is, instead of a letter mapped to a character or a Unicode area, you’ll have a symbol.

About Font Awesome icons

Font Awesome is a rich collection of 400+ icons. This library is completely free for both personal and commercial use.

In this tutorial, I am going to show you how to install and use Font Awesome icon fonts in WordPress. You can install a WordPress plugin to use icon fonts, or if you are a technical person, you can do it manually.

Using Font Awesome icons with a plugin

Better Font Awesome is a free and popular plugin (20,000+ active installs) to use FontAwesome icon on your WordPress site.

This free plugin allows you to automatically integrate the latest available version of Font Awesome into your WordPress site, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator.

Now go to Settings > Better Font Awesome to learn about basic settings. There are few basic settings. You can use minified CSS, hide admin notices and Better Font Awesome can also attempt to remove Font Awesome CSS and shortcodes added by other plugins and themes.

You can very easily add icons to your posts and pages. Just click the Insert Icon button and select your desired icon to add in your post.

Using Font Awesome icons manually

Now I will show you how to use FontAwesome icons on your WordPress website without any plugins.

Getting started with Font Awesome is not difficult. You can simply paste a line of code in the head section of your HTML document. But to use Font Awesome in WordPress we have a much more advanced function called Enqueuing. We will use this function to register a Font Awesome CSS document.

Getting started: Create a child theme

Child themes are a great starting point to customize WordPress themes. With child themes you can incorporate co-author plus plugin into your theme or even code a custom landing page for products. For this tutorial, I have created a child theme. If you are a beginner and don’t know about WordPress child themes, read this tutorial to learn how to create a WordPress child theme.

Now go to WordPress dashboard and create activate child theme. Visit front end of your website. You won’t see any style. Don’t worry we need to enqueue the parent style-sheet.

Enqueuing styles

By enqueuing styles and scripts, we can control where, when, and how each stylesheet and each script is called and what dependencies each of them have. Enqueuing of the stylesheets and scripts is done from functions.php file.

We are using Enqueue function to register parent and child theme’s stylesheets.

We also need to get Font Awesome icons onto our site. The easiest way to to include Font Awesome on our site is to call the Bootstrap CDN stylesheet.

To make sure everything is working fine, visit the front-end of your site. If you see any errors check all the code.

Now we need to make sure that fonts are queued up. To see if the fonts are queued up i am going to use Chrome Developer tools. To open Chrome Dev Tools, right click any where on the screen, go to Resources tab > Frames > LocalHost.

In the screenshot below you can see a list of all the different things including Fonts, Scripts and stylesheets. If you will select Style-Sheets, you will see a whole bunch of different stylesheets. Most importantly font-awesome.min.css.

Alternatively you can right click anywhere on your web-page, select view source and search for font-awesome:

What we have done:

Registered parent theme’s styles

Registered Font Awesome styles

Registered child theme styles

Now we know that we have our styles queued up. All we need to do is to go into styles.css file and tell WordPress where we want to apply those icon fonts.

How to use Font Awesome

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag. Then, you have to assign them two classes. The

fa

class plus a second class, which should be the name of the icon you want to add to your project, for instance

fa-home

,

fa-check

or any other icon name.

Add the following code anywhere on your WordPress site (Page, post or Widget) and you you should see Font Awesome icons on your website.

In sidebar widget you can see Font awesome icons with different sizes. I have also included a Check icon to the current menu item. WordPress allows you to easily style your current active menu item. I have used following CSS to to style current menu item.

We have a list item with a class of current-menu-item. And then in the CSS, we’re using the before pseudo selector to say: hey, go ahead and display this particular character encoding, f00c, which, in this case, is the symbol for check, so it would show the check icon. Make sure that in your CSS, that icon font (FontAwesome) is being used for its font family.

I have also used different background colors to highlight current menu item list item and link.

Bear in mind that for CSS stylesheets you will have to use Unicode and not the actual CSS class, To add any icon on your pages, posts or widgets you can use Font Awesome classes.

How to add Font Awesome icons to menu items

Have you see awesome menus on other awesome WordPress websites and wondering how you can add different icon to each menu item. See the screenshot below, i have added different icon for each menu item.

It is very easy to add font awesome icons to each menu item. Go to Menus and select your menu. Select your link and use

i

tag with two required classes. For example for home menu you can use <i class=”fa fa-home”></i>

Tahir Taous loves to write about WordPress, Theme Development, Responsive Design and Blogging. He is an expert when it comes to use awesome tools and techniques to create and customize WordPress Themes. Download WordPress Theme Development Toolkit, which reveals best tools for Responsive WordPress theme development.
More articles by Tahir Taous

Picking up from where we left off, we need to start by creating some HTML to display the data we’ve stored in the $results variable. You can always modify this to suite your project. I’ll be using a table structure. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link href="styles/theme.css" rel="stylesheet"/> <title>PHP & MySQL</title>\ </head> <body> <div id="wrapper"> <table> <thead> <th>Title</th>...

In the first two parts of this series, we created the data layer that will hold the polling data and established methods for setting the variable values and reading from the database tables. In this part, we will build the methods that will write new polls and answers to the tables. The addPoll method adds a new record to the devdrive_polls table and returns a Boolean value that signals if the record was added successfully. function addPoll($aArgs) { // add a poll record $sql = "LOCK TABLES devdrive_polls...

A SQL injection is a common programming error the consequences of which can be really devastating. Many successful hacking attacks start when a hacker discovers a vulnerability that gives an opportunity to inject SQL code. When an SQL injection occurs, the structure of an SQL query is compromised and as a result you are left at the mercy of the potential hackers. If there is a vulnerability found, hackers can exploit it to gain access not only to your site and database but in extreme cases also to your corporate...

So far we've created some basic PHP pages and added some simple authentication. Today we're going to going to build on that by adding database support. This will allow us to add proper authentication to our application and start saving tasks. I should also note that I am currently writing PHP in-line and not using functions (or object orientated PHP) I will tidy this up in the next tutorial and spend more time explaining it and what it's benefits are. Last week ... Last week we installed XAMPP, so you should...

In our last session, we looked at the process of entering information on ad banners and ad clients, as well as generating ad activity reports. This week, we examine how to retrieve a random banner ad. We will also learn how to delete, activate and deactivate ads and clients. The getRandomAd() function retrieves a random ad by using the PHP rand() function. The function returns the ad’s primary key ID, client ID, title, URL and redirect path. The function also updates the activity table for this banner...

In our last PHP Ad Tracker lesson, we constructed the database tables for our ad banner application. Now we are ready to construct the data object that will hold the variables and functions that will display, add, edit and delete the data in those tables. Once we name all of the variables and functions, we will start applying the code to them. Variables: The data object class will hold two variables: one to hold the banner ad ID number from the ads table, and one to hold the database connection information....

In the previous lesson, we examined the basic functions of our banner ad tracking system, including the retrieval of records for both banner ads and advertisers. In this lesson, we will look at the functions responsible for generating reports and manipulating the data in the ads table and advertiser table. The getClientsList() function retrieves active client records and sorts them alphabetically by client name: function getClientsList() { // get clients from db $sql = "SELECT ad_client_id,...

Introduction ... I’m going to tell you a story, its about love, death and re-birth... Or something In the beginning there was a young html element called <table>. He had one purpose in life, to display data and life was good. But before long though he had been corrupted, his masters used him to define layout and structure. Things he was not originally designed to do, and so began the dark ages of web design. Then one day, there came a young knight called CSS, and with him he brought light to designers...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.