How to Use Octicons Icon Font in WordPress

Github just announced the released of their official icon font, known as Octicons to public. Previously, we’ve written various tutorials on how to use other icon fonts in WordPress such as Genericons and Font Awesome and adding Octicons icon font support to any WordPress site is no different.

Registering Octicons Icon Font

1. First, get a copy of Octicons Icon Font from the official website.

2. Upload the octicons folder into your current theme folder.


yourdomain.com/wp-content/themes/your-theme/octicons

3. To add support for Octicons, we’ve to use wp_enqueue_style function. This code assumes that you’re using a child theme. Simply copy and paste the code below into your functions.php file.

<?php

//* Enqueue Octicons icon font in WordPress
 
add_action( 'wp_enqueue_scripts', 'afn_enqueue_octicons' );
function afn_enqueue_octicons() {
	
	wp_enqueue_style( 'afn-octicons', get_bloginfo( 'stylesheet_directory' ) . '/octicons/octicons.css', array(), '2.0.2' );
	
}

This code has been tested and works perfectly in Genesis Framework child themes.

Example of Usage

1. If you want to use the font icon anywhere on your post or page, you may use something like this:

<span class="octicon octicon-flame"></span>

That’s it. It’s so easy to this can easily be done in less than 5 minutes. However, before making any modification to your theme, it’s always the best practice to first backup your theme.

If you found this tutorial to be helpful, feel free to share it with your friends. Want more awesome tutorials like this? Please follow our official Twitter and Google+ account.