Use WordPress Dashicons to Add Font Icons to Your Genesis Theme

Share this on:

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.

post with WordPress dashicons

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.

Dashicons

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";

content calendar dashicon

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!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

7 responses to “Use WordPress Dashicons to Add Font Icons to Your Genesis Theme”

  1. Marcus Tibesar Avatar
    Marcus Tibesar

    I installed this on our Minimum Pro site and, it worked great. The only thing I had to do is set the vertical-align to ‘middle’.

    I’d like to know if others have used the other Dashicons elsewhere on their sites.

    Thank you for a very beneficial post Marcy! Most appreciated!

    1. Marcy Diaz Avatar

      On a couple of themes,
      vertical-align: middle;
      looked nicer for me too. Brian Gardner said the new Parallax Pro theme uses Dashicons; see the Tags and Categories on the bottom of the blog posts. You’re welcome, Marcus.

  2. Kingsley Avatar

    Nice Tips thanks for letting us know…. but how can those with no CSS knowledge merge the css codes together?

    1. Marcy Diaz Avatar

      I’m glad you like them, Kingsley. You can find all the code merged together in the Github Gist here: Use WordPress Dashicons

  3. Gokhan Taysi Avatar
    Gokhan Taysi

    Hello, Thanks for useful instructions.
    But i am having trouble with the ssl activated site. Which I am having this problem as below.

    Chrome Java Script Console Message:
    “Mixed Content: The page at ‘https://www.domain.com/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://www.domain.com/wp-content/themes/themename/’. This request has been blocked; the content must be served over HTTPS.”

    I tried to analyze the problem at the function strings; Guess —get_stylesheet_directory_uri— does not call the theme uri with the https.

    Do you have any idea to define a function according to http uri specification?

    Regards,

  4. Gokhan Taysi Avatar
    Gokhan Taysi

    I searched a little while waiting for your reply..
    When I add ‘http’ and ‘https’ like below, fixed.
    Thanks again!

    wp_enqueue_style( ‘amethyst-dashicons-style’, ‘http’,’https’,get_stylesheet_directory_uri(), array(‘dashicons’), ‘1.0’ );

    1. Marcy Diaz Avatar

      Thanks for your comments, Gokhan.

      Your fix should work well, but since your domain is using SSL/HTTPS, you may just want to add to your .htaccess to force everything to use https.

      I use this:

      RewriteEngine On
      RewriteCond %{HTTPS} off
      RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

      from Yoast – https://yoast.com/dev-blog/move-website-https-ssl/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.