In case you haven’t notice, Icons are all the rage these days. All the cool kids are using them, so it only makes sense that you should use them too. And what better place to use one than in your breadcrumbs.

Not every theme uses breadcrumbs, so we’ll give a quick explanation of them. Breadcrumbs are a link “trail” to give a visual representation of the path used to arrive at this page.

Besides giving an easy way for visitors to go back to the previous, parent page or home page, they’re good for SEO (Search Engine Optimization).

As with most things Genesis, there is a filter that allows you to easily modify the breadcrumb display, including the “Home” text:

add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {
    $args['home'] = 'Home';
    return $args;
}

“Home” is the Genesis default text for the home breadcrumb link. Changing “Home” in the function above will change the Home text that appears in your breadcrumbs.

This works great if you’re only changing the text, but this function encodes html using esc_html(), so if you change it to add an icon or inline image, the code will display instead of the image.

Replace The Home Text With A Font Awesome Home Icon Using A Genesis Filter

Of course, this can be done using css but there’s another way using a different breadcrumb filter. This filter allows you to replace the “Home” text with your html code to display icons or images. The filter name is “genesis_home_crumb”, which does just as it says and filters only the Home portion of the breadcrumb.

Before we can use this filter we have to access the Font Awesome library. On the Font Awesome getting started page, they provide several methods. The first method shows you how you can use the Font Awesome CSS file that’s hosted on the Bootstrap CDN so you don’t have to worry about uploading the files to your own server (if you prefer to host your own, there’s an example for that also.

The proper way to include this file is by using WordPress’ built in wp_enqueue_style function:

add_action( 'wp_enqueue_scripts', 'youruniqueprefix_load_scripts' );
function youruniqueprefix_load_scripts() {
    wp_enqueue_style( 'youruniqueprefix-fontawesome' , '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' ); // font awesome css from cdn
}

Now that we have Font Awesome set up, visit their website to find the icon you want to use. In our case, we’ll use the fa-home icon. If you visit the fa-home icon link, you’ll see the code to add to include the font on your website: <i class=”fa fa-home”></i>

If we replaced “Home” with this code in the genesis_breadcrumb_args filter above, it would show the html and not the icon. So how can we replace the “Home” text with the icon? Using the “genesis_home_crumb” filter, we can rebuild the “Home” part of the breadcrumbs with our html.

Add the function below to your theme’s functions.php file, and your “Home” text will now be replaced with the Font Awesome “fa-home” house icon. Of course, you can use any html you want, so if you are using a different icon set, or want to use an inline image, simply replace the code with your own html and you’ll see the results.

// Replace breadcrumbs "Home" with Home Icon
add_filter ( 'genesis_home_crumb', 'youruniqueprefix_breadcrumb_home_link' ); // Genesis >= 1.5
function youruniqueprefix_breadcrumb_home_link( $crumb ) {
    $crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="fa fa-home"></i></a>';
    return $crumb;
}