PIN IT

Include Font Awesome in WordPress

Icons add a unique detail to your website, and can be used on your WordPress posts and pages to stand out. The best source of icons for your WordPress website is Font Awesome. Why Font Awesome? They are constantly adding new icons – as of this blog post, there over 1,400 free icons to choose from! You can easily change the style of the icons by customizing them with CSS. This blog post will teach you how to include Font Awesome in WordPress, and how to customize these icons on your website.

How To Include Font Awesome in WordPress

Before you can begin using the icons, you first need to include Font Awesome in WordPress. Many WordPress themes already include Font Awesome, so you may be able to skip this step. To check if your theme already includes Font Awesome, search your theme for the font-awesome.min.css file. If you find this file in your theme, you can move on to the next step!

To include Font Awesome in WordPress, navigate to your theme’s functions.php file. I recommend you use a child theme to make changes to your WordPress site. If you add this code to the functions.php file of your parent theme, you will lose this change next time you update your parent theme. If you do not know how to make a WordPress child theme, check out our earlier blog post.

Here is the code to include in your theme’s functions.php file:

As of the writing of this blog post, the current version of Font Awesome is 5.5.0. To get the code for the latest version, visit the Font Awesome On the Web page. Under the CDN section, click on “Free” and get the URL from the code provided. Note: remember to remove “https:” from the default URL when using the code in your own theme.

How To Use Font Awesome Icons

To include Font Awesome in WordPress posts and pages, click on an icon to get more information such as the heart icon. At the top of the page, you will find the code to include the heart icon on your website:

Copy and paste this code in the “Text” tab of your WordPress posts and pages.

By copying and pasting the code in this blog post (and adding the custom CSS detailed in the next section), here is the result with some Font Awesome icons:

Font Awesome Options

Just like regular text on your WordPress site, you can make the same changes to Font Awesome icons with CSS. Read our earlier blog post to learn how to easily add custom CSS to your site (and never lose it when your theme updates). Here is the CSS used to show the customized icons above:

With so many icons and customization options, it’s a great idea to include Font Awesome in WordPress.