Three ways to use Font Awesome icons in GeneratePress


This is a long article but if you already know WordPress and Font Awesome, adding icons to your navbars and pages is easy

Icons in the navbar
To put an icon before the text in the navbar, just paste your code immediately before the Navigation Label text. The Navigation Label is the menu link text such as Home, About Us and Contact Us.

Icons inside h2 headings
To put an icon before a h2 heading, just paste the Font Awesome icon code immediately before your heading text. Make sure the icon code is inside the h2 tag.

Make icons larger
To display larger size icons, add fa-2x, fa-3x, fa-4x or fa5x to your icon code.

Don’t forget the comment tag
And don’t forget that WordPress thinks Font Awesome tags are empty HTML tags. So you need to put a HTML comment just before the closing icon tag. This prevents WordPress from mistakenly stripping out your Font Awesome tags.


You can put icons inside the navbar

Navbar with Font Awesome icons
Navbar with Font Awesome icons

 

You can put icons at the beginning of a headline

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More


You can put a large icon above a block of text, like this

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More


Load ALL of the icons

The first thing you need to do is open the customizer and make sure the full set of Font Awesome icons is loading.

Go to Dashboard > Customizer > General tab

Make sure the box that says…

Load essential icons only
Is NOT! ticked.

If you do tick the box that says load essential icons only, WordPress will only load the icons that are needed for a basic install of GeneratePress. And you will not be able to add the icons used in this tutorial.

OK, you’ve made sure that all of the Font Awesome icons will load. Your next job is to…

Select some icons to use

Step two is to go to the Font Awesome site and get the code you need for the icons you want to use.

There are hundreds of icons to choose from. It’ll take you a while to browse through all of the icons and select the icons you want to use.

Click one of the icons listed

Click the icons you want to use
Click the icons you want to use

Then copy the Font Awesome code

Copy the Font Awesome code
Copy the Font Awesome code

Edit the code

You can edit this icon code in two important ways.

Font Awesome icon code with fa-5x and a HTML comment tag
Font Awesome icon code with fa-5x and a HTML comment tag

Using the code

Now you have the icon code but you need to know how to use it.

First, we’ll put icons inside the navbar

Navbar with Font Awesome icons
Navbar with Font Awesome icons
  • Go to Dashboard > Appearance > Menus
  • Select the Edit Menus tab
  • In the Menu Structure panel click the tiny down arrow to open and edit each link
  • Just paste the Font Awesome icon code before the text that says Home or About us etc

To add an icon before a navbar label, just paste the Font Awesome icon code directly into the Navigation Label box in the Menu Structure dialogue box.

You don’t need to edit the code before using it in the navbar, you can use the code exactly as it came from the Font Awesome website.

Paste the Font Awesome code directly into the Navigation Label dialogue box
Paste the Font Awesome code directly into the Navigation Label dialogue box

Placing a Font Awesome icon directly before a h1 or h2 headline

 

You can put icons at the beginning of a headline

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

 

What you need to do…

Get your code from Font Awesome

Place a HTML comment tag immediately before the closing icon tag

Place a HTML comment tag inside the Font Awesome icon tag
Place a HTML comment tag inside the Font Awesome icon tag

Wrap the icon tag in a h2 heading tag

Placing a Font Awesome icon immediately before a h2 heading
Placing a Font Awesome icon immediately before a h2 heading

Placing a large Font Awesome icon, on it’s own line above the headline

You can put a large icon above a block of text, like this

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

This is the headline

And this is a short paragraph of text that goes under the headline. Don’t make it too long or it’ll look silly.

Read More

What you need to do…

Get your code from Font Awesome

Place a HTML comment tag immediately before the closing icon tag

Place a HTML comment tag inside the Font Awesome icon tag
Place a HTML comment tag inside the Font Awesome icon tag

You now have a standard sized Font Awesome icon. This is too small for our needs, so we need to increase the size of the icon by adding a small code snippet inside the icon code.

Note where I’ve added fa-5x to this code snippet…

I increased the icon size by adding fa-5x to the code snippet
I increased the icon size by adding fa-5x to the code snippet

By adding fa-5x to your icon code, the icon will display at five times it’s original size. The icons below show the original size and then fa-2x, fa-3x, fa-4x, fa-5x, …