We’re big fan of icon fonts. They make designing a WordPress theme so much easier. Should you use them? Interestingly, according to Pictonic.co, icon fonts could speed up your page loading time by 14% compared to images and their size are just 10% of their SVG files.
There are lots of icon font sets available and these are some of the popular ones:
Previously, we’ve written and article on how to add support for Font Awesome in any WordPress theme using a plugin called Font Awesome Icons plugin.
In today’s tutorial, we’re going to share a little snippet to add support for Font Awesome to any Genesis child theme. By using this code, you won’t need to use the additional plugin.
1. Open the functions.php file of your Genesis child theme and paste the code below:
The code has been tested with Genesis child theme only but we see no reason why it shouldn’t work on any other non-Genesis child themes.
2. Download the latest version of Font Awesome, and upload the CSS and Fonts folder to the root of your child theme directory.
Testing the code
Once you’ve added the snippet above, it’s time to test whether the code works.
1. See the source code of your web page. If you’re using Windows, hit CTRL+U to view the source code of your webpage. Then, look for Font Awesome script. You may use CTRL+F to help you search for the script. It’s also important to make sure the file is located in the right path.
2. Try adding any icon font to your post.
- See the Example page to see how to add icon fonts to your post/page.
- For list of icon fonts available, please see the Icons page.
That’s it. If you’ve any question, feel free to drop your comment below.