I recently wanted to whittle down the amount of plugins I run on the website. Part of this was to integrate Font Awesome into Genesis so I could remove the one I was using before. This is a very short tutorial on how to add Font Awesome into your existing Genesis Framework theme. It is really quick an painless I promise!
In my previous article I used a fantastic plugin to integrate Font Awesome so I could use it to create some social Icons. The issue is it hasn’t been updated for quite awhile. I wanted to integrate it directly into the existing theme. So I started looking into how to do it. I was surprised how easy it was to do it!
Read More: Create Social Buttons with Font Awesome and CSS
The way I’m going to show is to use the free to use their CDN link to load Font Awesome icons. This works the same way you already use Google Fonts on your website. There is another way you can load the fonts directly onto your web server as well. But I have yet to see any type of performance hit to website load times while using the method I’m outlining here. So – you should be safe to use this without any issues.
How to Add Font Awesome to Your Genesis Framework Theme
Warning: You will need to make up a backup of your existing functions.php file BEFORE attempting to add this to your theme. This way you can always roll back or look at what you did if it doesn’t work. ALWAYS backup before making any type of edits to your theme!
Note: One thing to mention here as well. Although this won’t get overwritten if you update the main Genesis framework. It will be overwritten if you ever update your child theme. Make sure to make a note of it as you will have to add it back.
To do this you will need to go to your functions.php file and add the following line where you see the existing ‘wp-enqueue-scripts’ section from within the functions.php file.
You will either need to FTP into your web host or make the edit directly from within the WP-Admin screen.
FTP Into Your Host Method
FTP into your web host and go to the ‘your-wordpress-install-directory’ -> wp-content -> theme -> ‘your-genesis-child-theme’ directory. Then right click on the functions.php file and select view/edit. (Using Filezilla). Add the line to the appropriate location inside of the php file. Click on Save – then have Filezilla re-upload the changes you made.
Edit from the WP-Admin Editor
Highlight over Appearance then click on Editor. Once inside the Editor screen you will need to look for the functions.php file on the right. Click on it and it will load up the php file for you.
Now copy and paste the line underneath one of the existing lines where it has the ‘wp_enqueue_style’ at the beginning. Most new themes have a section and it should be pretty easy to locate.
1 | wp_enqueue_style( 'prefix-font-awesome', 'http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css', array(), '4.2.0' ); |
Then save it – reload your website and look at the source code. You should see a line near the top that looks something like the following:
1 | <link rel='stylesheet' id='prefix-font-awesome-css' href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css?ver=4.2.0' type='text/css' media='all' /> |
Now you should be all set!
Um…. I don’t have an ‘wp-enqueue-scripts’ section!?
Ok, I forgot to mention this. Some older themes might not have this in there. This was some added functionality when Studiopress brought Genesis 2.0 online. Not a biggie. You’ll just have to verify that your running Genesis 2.0 then just create a custom entry for it! Use the code below to add Font Awesome:
1 2 3 4 5 6 7 8 9 10 | /* Enqueue and Load Font Awesome ************************************************************ */ add_action( 'wp_enqueue_scripts', 'ajg_font_awesome' ); function ajg_font_awesome() { if ( !is_admin() ) { wp_enqueue_style( 'afn-font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.2.0' ); } } |
Tip: As Font Awesome continues to change/add icons to their icon set. If you ever want to upgrade to it? All you need to do is to change the ‘4.2.0’ to whatever the version number they currently are using. Its an easy 2 second fix to stay up to date!
OK – So How Do I Use Font Awesome?
So you have it installed. Now to see if it works. You can add Font Awesome anywhere within your website. I suggest going to the Font Awesome website and checking out their Examples page to see some of the different ways you can use it. Just to show you that it works and save you an extra click here is the first example from the website:
1 2 3 4 5 | <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x |
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
As you can see it’s very simple and easy to integrate with your Genesis (affiliate link)theme! Oh, and this should work with any other theme out there as well. I’m just particularly fond of Genesis so I used it as the example as that’s what I work with.
Stay tuned as I’ll be writing a few more articles on different ways you could implement Font Awesome for your own Genesis website! Oh and if you have any questions? Please feel free to leave me a comment and I’ll be more then happy to answer them for you.
