How to Load Genericons Icon Font in Genesis Framework

Unlike flat design website, icon font isn’t just a trend, but a great tool that every web designer should use in their design. It makes designing a website becomes much simpler and quicker. Using icon font is also believed to reduce your site loading speed by 14% compared to images. Previously, we’ve published numerous articles about icon fonts:

• Load Font Awesome Icon Font in Genesis Framework
• Using Icon Fonts in WordPress with Font Awesome Icons Plugin
• Genericons – Yet Another Icon Font for WordPress

In today’s tutorial, we’re going to show you how to load Genericons icon font in Genesis Framework. The code could also be used on any other WordPress child theme. 1. First, download the latest Genericons file. 2. Upload the entire Genericons folder to the root of your child theme. In this example, I renamed the folder to “fonts”. 3. Next, open up your functions.php file of your child theme, copy and paste the snippet below. 3.0.2 is the current version of the Genericons script at the time of writing. If you use newer version, please change this figure to force the browser to load the right version of the file. Also, make sure you’re using the right path to your Genericons folder.

<?php

//* Enqueue Genericons icon font in Genesis Framework

add_action( 'wp_enqueue_scripts', 'afn_enqueue_genericons' );
function afn_enqueue_genericons() {
	if ( !is_admin() ) {
		wp_enqueue_style( 'afn-genericons', get_bloginfo( 'stylesheet_directory' ) . '/fonts/genericons.css', array(), '3.0.2' );
	}
}

That’s all what you need to do to load the Genericons icon font on your Genesis Framework child theme. To test whether the code is working, you can look up the name of the file by looking at the source code of your site and try using any of the icon in your post.