/ Snippets / How to Load Font Awesome Icon Font in Genesis Framework

How to Load Font Awesome Icon Font in Genesis Framework

UPDATED:

Font Awesome

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:

  1. Font Awesome
  2. Ico Moon
  3. Foundation Icon Fonts
  4. Elegent Icon Font
  5. Genericons

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 additional plugin.

1. Open your functions.php file of your Genesis child theme and paste the code below:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
<?php



/**

 * Enqueue and Load Font Awesome

 *

 * @author WPSpeak.com

 */

 

add_action( 'wp_enqueue_scripts', 'afn_enqueue_awesome' );

function afn_enqueue_awesome() {

	if ( !is_admin() ) {

		wp_enqueue_style( 'afn-font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.0.3' );

	}

}
view raw functions.php hosted with ❤ by GitHub

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.

upload font awesome

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.

Load Font Awesome Icon Font

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.

Comments

  1. liz says

    Hi, I followed your instructions and have the code in functions php and dragged over via ftp the Font Awesome CSS and Fonts into the root child theme menu. I located it, correctly it seems, in the site code.

    Now, I am trying to get the envelope font awesome into my utility bar, right. I have been using the Utility Bar Right widget that I created. I have a ‘text’ widget dropped in but seem unable to get the icon to show - I just get text only. I am perhaps putting the wrong code? I know I need html in the widget box, but am at a loss at to what to put to render the envelope and have our email spelled out next to it and both hyperlinked to a mailto: any ideas what may be going wrong? Tnx.

    Reply

  2. Andor Nagy says

    Hi,
    Nice tutorial, I have a question though. is it possible to use the font icons in CSS? Like using the :before and :after Pseudo-Elements?

    Thanks!

    Reply

    • Editor says

      Hi,

      Absolutely. Css-Tricks have posted some great articles about advance usage of icon font. You may check some of these:

      1. https://css-tricks.com/examples/IconFont/
      2. http://css-tricks.com/stackicons-icon-fonts/http://css-tricks.com/stackicons-icon-fonts/
      3. http://css-tricks.com/five-use-cases-for-icon-fonts/

      Reply

  3. C4 Envelopes says

    Hi! Quick question that’s completely off topic. Do you know how
    to make your site mobie friendly? My weblog looks weird
    when viewing from my aople iphone. I’m trying to find a theme or plugin that might be able to
    correct this problem. If you have any recommendations,
    please share. Thasnk you!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *