The best way to add font awesome icons to your WP site without a plugin is by adding a code snippet inside your theme’s functions.php file. It is safest to do this inside a child theme, which I’ll get into in a minute.
You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.
Why Create A Child Theme
When you make changes to your theme’s template files your changes can be overwritten when the theme is updated. Depending on your theme it may be updated every few months.
When you create a child theme, the changes you make are not overwritten by parent theme updates. You may find the parent theme updates alter your child theme’s appearance because the developer may update files that you modified in your child theme. So you may have to make adjustments when the parent theme is updated, but that’s pretty rare.
Now that you know the value of a child theme, if you want to create one I’ve created a step-by-step video tutorial for you (YouTube link).
Adding Font Awesome Code To Your Theme
Now, in your parent theme or child theme, whichever one you have, hover over to the appearance menu and click on editor as shown on the screenshot below.
This will open a list of all the files in your theme. In my example, I’m using a child theme that contains two files, the functions.php file and the style.css file. We’ll deal with the functions file first.
Go to the functions file and paste in this code as shown in the screenshot below:
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
What this code does is enqueue (or add) the Font Awesome stylesheet to the website header.
If you look closely at the code you copied and pasted, you can see that it’s for Font Awesome version 4.7. That’s the most recent version as of this writing and version 5.0 is coming soon.
When there are updates to Font Awesome and you want the new icons you’ll need to update this code.
For example, if version 4.7.1 comes out, you will need change 4.7.0 to 4.7.1 in the URL you copied and pasted. This will load the new font awesome icons. Manually updating like this is a drawback, but you can solve it by using the Font Awesome plugin.
Using Font Awesome Icons
Now that you have the code added to your site, the next step is to add the font awesome icons. To do so head over the Font Awesome website: http://fontawesome.io/
Find the Icon You Need
Once you’re on http://fontawesome.io, you’ll need to find the code for the icon you want on your site. Find the icons menu and click on All Icons.
There are 675 of them as of this writing. Pick the one you want. For the purpose of this tutorial, I picked out the recycle icon because today is recycling day in my neighbourhood.
The icons will look like shown on the screenshot below:
Copy – Paste The Font Awesome Class
In order to bring the Font Awesome icons to your page, you’ll need the copy and paste the embed code below pictured below. First, copy the code from the Font Awesome website.
Then paste the code inside any page, post or custom post type or any text-based field that accepts HTML.
The pasted Font Awesome code will look like this:
When you’re done update or publish it. If you view your page, you’ll see that it now has a font awesome icon inside it.
Changing The Size Of Font Awesome Icons
Making your icons bigger or smaller can be done via CSS or you can change the code you pasted in by adding an extra class called ‘fa-2x’ inside the code. This will double the size of the icon. You can make the icon up to 5 times bigger by adding ‘fa-5x’ inside the code. If you’re not satisfied with the 5x size, you’ll have to do manual CSS modification.
The biggest version of this icon without CSS modification is 5 times the size.
In Conclusion
There are a lot of cool and fun things you could do with Font Awesome icons which are highlighted here with examples.
You can also find a visual explanation for some of the useful tools Font Awesome has to offer near the end of the video tutorial at the top of this post. You can have icon lists, change the size of the icons (which we covered in the post), fix the icon width, add borders and so much more. Make sure you check out the video tutorial and visit the Font Awesome examples page to see what else you can do.
All in all, Font Awesome icons are simple, pre-made for you and easy to implement to your WordPress site. For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.