You are here: Home » Plugins » How To Use Font Awesome Icons In WordPress | Font Awesome Icons Plugin Tutorial

How To Use Font Awesome Icons In WordPress | Font Awesome Icons Plugin Tutorial

by WPTutorials101

Learn how to use Font Awesome icons to your WordPress website! In today’s Font Awesome tutorial I’m gonna show you how to add FA icons to your wordpress post, pages, widgets and menus using a plugin from WordPress repository.

For more tutorials like this, visit our website at

My #1 Recommendation To Make a Full-Time Income Online.


If you want to add font awesome to your WordPress website without a plugin, check this video here: where I’m teaching you how to add font awesome icons to your WP website manually through functions.php or with CDN by editing header.php file.

We are going to add Font Awesome 5 through 5 simple steps:

00:01:39 Install, Activate & Setup Font Awesome 5
00:04:15 How to use Font Awesome Icons Script | HTML & CSS tricks
00:06:00 How to use Font Awesome in WordPress Posts & Pages
00:07:04 Edit & replace icons using cheetsheet file
00:08:30 Add font awesome into your WordPress widget using text widget
00:09:10 Quick method to add font awesome into your header menus.

Official Font Awesome:

Font Awesome Cheetsheet:

Font Awesome WordPress Plugin:

Login into your WordPress dashboard.
Hover over plugins and click Add New.
Search for Font Awesome, then click install and activate.
Hover over settings and click on new new menu item called Font Awesome.

Here you can edit Font Awesome plugin settings, like script version, method used to display icons, compatibility options and before, after css support.
Special option in the plugin settings is Remove unregistered clients. Watch video and find out when you’re supposed to tick on this option.

Go to and visit page called DOCS
There will be some basics on how to use font awesome.
At the sidebar area underneat Styling you can find different styling options.
Sizing icons, fixed with icons, Icons in a list and so on and so on.
In the video I’m explaining you few of these option.

Adding of FA 5 icons into our page.
Go to Pages and create a New Page.
Copy different variations with different css styling to your page.
Learn how to edit and replace Font Awesome 5 icons using font awesome cheetsheet.

In this step we add Font Awesome into our sidebar’s text widget.
Go to Widgets and add Text Widget into your Sidebar.
Add font awesome HTML code into text area of the widget. Save & test!

Add Font Awesome Icons into WordPress Header, WordPress Menu.
Go to Menus and find any navigation link.
In front of Navigation Label just paste any font awesome code and click save.

This is a great tutorial to learn:
how to use font awesome icons in wordpress
how to use font awesome 5 on your website
how to add font awesome icons css using cdn to wordpress menus, posts, pages and widgets!

Inspired by Imran Emu: How to Download and Use Font Awesome 5 Icons Tutorial | HTML,CSS Web Design offline & CDN ➜
Inspired by WordPress Tutorials – WPLearningLab: Add Font Awesome Icons To WordPress Using A Plugin ➜
Inspired by iEatWebsites: How To Add Font Awesome Icons To WordPress ➜

#wordpresstutorial #tutorialwordpress #WPLLCommunity

AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won’t put anything here that I haven’t verified and/or personally used myself.

All the best,
WP Society Team!

Related Videos