Have you seen the new WordPress Twenty Fourteen theme with the little font icons in the post or entry meta? You know, the ones next to the post date, and post author and tags? You can add these using icon fonts. There are many different icon fonts and resources for them and tutorials to use them.
However, WordPress 3.8 added an icon font – Dashicons – to the admin side of WordPress. And so with a bit of code, you can make those icons available to use in your Genesis WordPress Theme.
This tutorial shows you how to use the WordPress Dashicons icon font to add icons for the entry meta of the Genesis Sample 2.0.1 theme.
You can find all the code in the Gist: Use WordPress Dashicons
Overview of Dashicons and How to Use Them
You can see all of the Dashicons and get the code for each icon at Developer Resources: Dashicons. I’ve circled the ones you’ll use today.
Step 1. Find the image of the icon you want to use. Click on it.
Step 2. Look at the top of the page in the blue area to find the “Copy CSS” link. Click on it.
Step 3. You want to copy the code from the pop up that looks like: content: "\f142";
You’ll use this code below in your CSS for each icon. I’ve done all the copying, if you use the same icons that I used. Now that you have a general idea of what to look for, you can begin to edit your Genesis child theme.
(Note: See the Resource List for Your WordPress Website for recommendations for icon font resources, and custom CSS and script editors.)
Enqueue the Dashicons Font
The Dashicon font needs to be enqueued for the front side of your WordPress website or blog. You can do that by adding a bit of code to either the bottom of your child theme functions.php file or add it to a custom script plugin, like Code Snippets.
//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'amethyst_enqueue_dashicons' );
function amethyst_enqueue_dashicons() {
wp_enqueue_style( 'amethyst-dashicons-style', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );
}
Style the Dashicons and the Theme Entry Meta
Next you can add the icon styles to your child theme style.css or a custom CSS editor. If you add to the style.css file, you can find the section that starts with selector .entry-meta. Just below that is a new section – Pagination. Add all the CSS just above the Pagination section.
First add the CSS that will be used by all the icons; you’re going to add icons before each of these entry-meta selectors — entry-time, entry-author, entry-comments-link, entry-categories, and entry-tags.
.entry-time:before,
.entry-author:before,
.entry-comments-link:before,
.entry-categories:before,
.entry-tags:before {
color: #f15123;
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: top;
margin-right: 5px;
margin-right: 0.5rem;
}
You can choose any color you like; I’ve used a red-orange, #f15123, so the icons stand out; a nice gray to use instead would be color: #666;
If you wanted the icons to be smaller, for example, 16px, instead of 20px, you would change the line: font: normal 16px/1 'dashicons';
Next you want to add the code that you copied from the Dashicons page for each icon.
.entry-time:before {
content: "f145"; /* dashicons-calendar */
}
.entry-author:before {
content: "f110"; /* dashicons-admin-users */
}
.entry-comments-link:before {
content: "f101"; /* dashicons-admin-comments */
}
.entry-categories:before {
content: "f318"; /* dashicons-category */
}
.entry-tags:before {
content: "f323"; /* dashicons-tag */
}
Then you need to add a little extra padding to the right of the text.
.entry-time,
.entry-author,
.entry-categories {
padding-right: 15px;
padding-right: 1.5rem;
}
And last, if you want the categories and the tags to be on the same line, instead of separate line, like I have, you can add:
.entry-categories,
.entry-tags {
display: inline-block;
}
Some Optional Edits to the Entry Meta
I have some other edits in the Gist for this post, in case you decide you want to remove the “by” before the entry-author, or if you want to use just icons with no text before the categories and tags in the entry footer.
Please let me know how your icons look in your Genesis child theme using WordPress Dashicons!