Advertisement
  1. Web Design
  2. WordPress

How to Use Font Awesome in WordPress

Scroll to top
Read Time: 5 min

Need to add high-quality icons to your WordPress website? Have you heard of Font Awesome, but don't know how to use it?

In this article, we'll show you how to use Font Awesome to add icons to your WordPress website. 

Sea Icons available on Envato Elements.Sea Icons available on Envato Elements.Sea Icons available on Envato Elements.
Sea Icons available on Envato Elements.

Icons are an essential graphical element for any website, regardless of the industry. They add a visual element that adds interest to any web page they are on.

Font Awesome is the internet's most popular icon set. You get access to high-quality vector images that can be customized with CSS. Best of all, Font Awesome offers a free version that has over 1,600 free icons for you to use. Setting up and using Font Awesome in WordPress is easy. In this article, we'll cover all of the steps needed to get up and running with Font Awesome in WordPress.

First, let's go over an attractive offer for WordPress website owners. 

Envato Elements: Unlimited Downloads

Envato Elements is a service that provides an unlimited download subscription, meaning that you are free to download as many items as you like from millions of digital assets. This includes premium WordPress themes and plugins, icons, stock photography, royalty-free audio, and stock video.

The subscription is covered by simple commercial licensing that gives you the rights to use the item in a broad variety of projects, including those of a commercial nature.

The licensing is future-proof, meaning even if you unsubscribe and can't download items from Envato Elements anymore, any existing registered uses are still covered.

WP pluginsWP pluginsWP plugins
Envato Elements has tons of high-quality WordPress assets, including plugins.

Subscribe Today 

Subscribe today and start creating, or learn more about why Envato Elements is Great for WordPress Users.

Now let's cover how to use Font Awesome in five simple steps.

1. Install the Font Awesome WordPress Plugin

Setting up the Font Awesome WordPress plugin is like setting up any other WordPress plugin. 

In your dashboard, go to Plugins> Add New. In the Search plugins... field, search Font Awesome. Then click Install Now > Activate

activateactivateactivate
Activating the Font Awesome from the plugins section of the WP dashboard.

That's it! The WordPress Font Awesome plugin is installed and ready to go. Let's now go over how to set up the plugin. 

2. Set Up the Plugin and Kit

The plugin setup is very straightforward. On your WP dashboard, go to Settings > Font Awesome. This will open the Font Awesome menu. 

Our first option is whether we want to use Font Awesome in WordPress as a kit or use a CDN. 

Font Awesome recommends using the Kit option as it offers the most icons and gives you access to the Icon Chooser. 

To set this up, you'll first need to create an account on Font Awesome and create a kit. No other action is required once you create a kit on the Font Awesome site. 

Creating a kit in Font Awesome.Creating a kit in Font Awesome.Creating a kit in Font Awesome.
Creating a kit in Font Awesome.

Next, you need to get a Font Awesome API token. Go to the account page to generate and copy your API Token.

Access the Font Awesome API from your account. Access the Font Awesome API from your account. Access the Font Awesome API from your account.
Access the Font Awesome API from your account.

Go back to the Font Awesome settings in your WP dashboard and paste the API token into the API field. 

Next, choose the kit you just created. Now you are ready to start adding icons to your WordPress website.

Added in API key to Font Awesome WordPress plugin.Added in API key to Font Awesome WordPress plugin.Added in API key to Font Awesome WordPress plugin.
Adding an API key to the Font Awesome WordPress plugin.

3. Adjust the Font Awesome Settings

There are a few settings that you can adjust in the Kit settings on the Font Awesome website. 

The first setting is whether or not you want to use the free or paid version of Font Awesome. If you have the paid version, you'll want to click the pro version. 

The last setting you can adjust is whether you want the icons to be SVG or web fonts. In general, SVG is more powerful, but they don't work well with pseudo-elements. Our suggestion would be to use SVG. 

All right! Everything is set up and ready to go. Let's look at where you can find the icons to add to your site. 

4. Find the Icons That You Want to Use

Now it's time to find the icons you want to add to your WordPress website. Font Awesome has a library of icons you can choose from on their website.

There are over 1,600 icons in the free version of Font Awesome that you can use.There are over 1,600 icons in the free version of Font Awesome that you can use.There are over 1,600 icons in the free version of Font Awesome that you can use.
There are over 1,600 icons in the free version of Font Awesome that you can use.

As mentioned, there is a free and paid version of Font Awesome. If you want to use the free version, be sure only to find icons that are under the free filter.

Open up the icons you want to use and a separate tab on your browser. We're now ready to add them to your website. 

5. Add the Icons to Your Pages and Posts

Open up a page or a post from the WP dashboard. Once you are on the page or post editor, add a shortcode block to where you would like your icon to appear. Then, in the shortcode block, you will paste the HTML code for the icon you want to add. 

To get this HTML code, click on the icon you want to add from the Font Awesome library. A pop-up menu will appear. Click on the HTML code and it will automatically be copied to your clipboard. 

icon FAicon FAicon FA
Copy the HTML code from the Font Awesome library.

Then paste the code back into the shortcode block on the page or post editor. 

adding shortcodeadding shortcodeadding shortcode
Paste the HTML code into the post or page editor shortcode block.

That's it! Your icon is now on the page or post. Add as many icons as you would like to your pages and posts. 

Start Using Font Awesome Today!

Icons are necessary for all websites. They add interest to your web pages and help those pages convert.

Font Awesome for WordPress is a great tool for adding high-quality icons to your website. In this article, we covered two ways you can set up Font Awesome on your website. We then went over how to add the actual icons to your WordPress website. Within minutes, you can have icons up on your WordPress site. 

If you need even more premium icons for your WordPress site, be sure to check out Envato Elements! There are tons of icons and other assets that are valuable to any WordPress site owner.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.