When I released the Malcolm and Marcus child themes a couple of weeks ago one of the features I incorporated into both of them was Dashicon support for .entry-meta items as well as the Twitter and RSS links in the primary navigation menu rather than go with images.
So what are Dashicons?
I’m glad you asked! They are an icon font. I won’t go into detail here about the advantages of using an icon font over an image as that has been covered numerous times elsewhere. However the reason why I chose to go with Dashicons over another icon font is because WordPress already includes built-in support for them.
The image below is a screen capture of the Malcolm child theme.
I’ll walk you through the process of how I added them to both Malcolm and Marcus.
Enqueue the Dashicon Icon Font
First, we need to enqueue the dashicon style sheet by using
wp_enqueue_style. Add the following to your child theme’s functions.php file …//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'theme-prefix_enqueue_dashicons' );
function theme-prefix_enqueue_dashicons() {
wp_enqueue_style( 'theme-prefix-dashicons-style', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );
}
Make sure to change the 3 instances of theme-prefix to your actual child theme name.
Now, if you have seen either Malcolm’s or Marcus’s functions.php file you’ll notice the function above is slightly different than the one used in those themes. The only reason for that is I’m using several css and javascript files in those themes so I combined it all into one function.
Adding the CSS
In this section I’ll assume you want to target all of the .entry-meta items, those being,
- .entry-author
- .entry-categories
- .entry-comments-link
- .entry-tags
- .entry-time
Just leave out the ones you don’t want.
Okay, add the following to your child theme’s style.css file …
.entry-author::before,
.entry-categories::before,
.entry-comments-link::before,
.entry-tags::before,
.entry-time::before {
color: #666;
display: inline-block;
font: normal 20px/1 'dashicons';
margin-right: 5px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
Everything above can be tweaked to your own specs of course and is fairly straightforward. If you decide to change the font size however pay attention to the format of the rule …
font: normal 20px/1 'dashicons';
Let’s say you wanted to change the font size to 25px. You would write it as such …
font: normal 25px/1 'dashicons';
Now let’s add the actual icon fonts themselves. We do so by using the
content: "" property. The following also goes into the child theme’s style sheet..entry-author::before {
content: "\f110"; /* dashicons-admin-users */
}
.entry-categories::before {
content: "\f318"; /* dashicons-category */
}
.entry-comments-link::before {
content: "\f101"; /* dashicons-admin-comments */
}
.entry-tags::before {
content: "\f323"; /* dashicons-tag */
}
.entry-time::before {
content: "\f145"; /* dashicons-calendar */
}
In the above example I included comments detailing the name of each icon font.
Maybe add a little padding to the
.entry-header .entry-meta items?.entry-author,
.entry-categories,
.entry-time {
padding-right: 15px;
}
Again, adjust that to your liking.
The next step is optional. If you wish to display
.entry-categories and .entry-tags on separate lines (I think it looks better that way) add this ….entry-categories,
.entry-tags {
display: block;
}
If you really wanted to get fancy you could also change the colour of the icon font hover state. Can you do that? Yes of course, they are simply fonts! You can style them exactly the way you style regular fonts.
Let’s say you wanted to change the
.entry-author icon font hover state colour. As you can see above the normal state has already been defined as color: #666; Let’s change it to a shade of red ….entry-author:hover::before {
color: #a90000;
}
You can change the colour to anything you want for each of the items although you would probably want to match your theme’s regular link hover colour.
Moving on …
I mentioned earlier that I also used Dashicons for the RSS and Twitter links that appear in the primary navigation menu whereas many other Genesis child themes use images.
This is the CSS taken directly from the Malcolm child theme …
.genesis-nav-menu > .rss a::before,
.genesis-nav-menu > .twitter::before {
color: #999;
display: inline-block;
font: normal 20px/1 'dashicons';
margin-right: 5px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
.genesis-nav-menu > .rss a::before {
content: "\f303";
}
.genesis-nav-menu > .twitter::before {
content: "\f301";
}
.genesis-nav-menu > .rss a:hover::before,
.genesis-nav-menu > .twitter:hover::before {
color: #fff; /* using hover colour because of primary nav dark background */
}
You can change the above to your heart’s content. In fact, because it was written for Malcolm you may have to but it should get you started.
No comments: