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.
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 used 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 WordPress is easy. In this article, we’ll cover all of the steps needed to get up and running with Font Awesome 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.
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.
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. Setup 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 WordPress as a kit or use a CDN.
Font Awesome recommends using the Kit option as it offers the most amount of 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.
Next, you need to get a Font Awesome API token. Go to the account page to generate and copy your API Token.
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.
3. Adjust 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 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.
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 in the HTML code for the icon you want to add.
To get this HTML code, click on the icon you want to add. A pop-up menu will appear. Click on the HTML code and it will automatically be copied to your clipboard.
Then paste the code back into the shortcode block on the page or post editor.
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 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.