Easily Add Dashicons Icon Font to Genesis Framework Meta

Icon Font is a great ‘tool’ to help designers add awesome icons to their website and we love them too. In fact, we’ve written numerous articles on how to add different set of Icon Fonts to any WordPress site. Here are some of them:

• How to Use Octicons Icon Font in WordPress
• How to Load Genericons Icon Font in Genesis Framework
• How to Load Font Awesome Icon Font in Genesis Framework

However, in this tutorial, we’re going to show you exactly how to use Dashicons icon font to customize Genesis Framework meta. This tutorial is very straightforward and shouldn’t take you more than 10 minutes to follow. we’ve provided all the codes you need and here’s what our entry meta will look like.

First, copy all the PHP code from functions.php file below and paste it in the functions.php file of your Genesis child theme.

1. The first block of code is required to register the Dashicons icon font. Since WordPress is already bundled with all Dashicons files, we need to use wp_enqueue_scripts to enqueue it to be able to display the icons on the front end of our site. If you choose to use different set of icon font, you may remove this code and have to manually register your icon font. You may refer to any of the tutorial we’ve mentioned above.

2. The second block of code is required to rebuild on entry header meta in order to remove the word ‘by’ before the author name.

3. The third block of code required to rebuild on entry footer meta to remove the ‘Filed Under’ phrase before the category and ‘Tagged With’ phrase before the post tags.

<?php //* Please don't copy this opening php tag

//* Enqueue Dashicons Scripts
add_action( 'wp_enqueue_scripts', 'afn_add_dashicons' );
function afn_add_dashicons() {
	wp_enqueue_style( 'dashicons' );
}

//* Customize the entry meta in the entry header (requires HTML5 theme support)
add_filter( 'genesis_post_info', 'afn_custom_header_meta' );
function afn_custom_header_meta($post_info) {
	$post_info = '[post_date] [post_author_posts_link before=""] [post_comments before=""] [post_edit]';
	return $post_info;
}

//* Customize the entry meta in the entry footer 
add_filter( 'genesis_post_meta', 'afn_custom_footer_meta' );
function afn_custom_footer_meta($post_meta) {
	$post_meta = '[post_categories before=""] [post_tags before=""]';
	return $post_meta;
}

4. Next, once you’ve done copying the PHP code, you can copy all the CSS code from the style.css file below and paste it in style.css file of your child theme.

.entry-time:before,
.entry-author:before,
.entry-comments-link:before,
.entry-categories:before,
.entry-tags:before {
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 18px/1 'dashicons';
	margin-right: 5px;
}
 
.entry-author:before,
.entry-comments-link:before {
	margin-left: 15px;
}
 
.entry-time:before {
	content: "\f145";
}
 
.entry-author:before {
	content: "\f110";
}
 
.entry-comments-link:before {
	content: "\f125";
}
 
.entry-categories:before {
	content: "\f318";
}
 
.entry-tags:before {
	content: "\f323";
}

Voila. Once you’ve done copying all the codes, save it and please refresh your site and you’ll see the nice Dashicons icon font on the post meta. If you’ve any question, please drop your comment in the comment section below.

Don’t forget to subsribe to our RSS and follow us on Twitterand Google+ for more awesome WordPress tutorials and tips.