Add Icons in Genesis Header and Footer Post Meta Info

You can easily add icons just before the labels in Genesis Entry and Footer Meta content, including…

  • .entry-time
  • .entry-author
  • .entry-comments-link
  • .entry-categories
  • .entry-tags

genesis-icons-entry-meta

 

The five metas can be targetted with some CSS pseudo selectors by adding the below CSS to your style.css

.entry-time::before {
content: '\f469';
font-family: dashicons;
color: #666;
font-size: 25px;
padding-right: 5px;
vertical-align: middle;
}
.entry-author::before {
content: '\f110';
font-family: dashicons;
color: #666;
font-size: 25px;
padding-right: 5px;
padding-left: 10px;
vertical-align: sub;
}
.entry-comments-link::before {
content: '\f101';
font-family: dashicons;
color: #666;
font-size: 25px;
padding-left: 10px;
vertical-align: middle;
}
.entry-categories::before {
content: '\f322';
font-family: dashicons;
color: #666;
font-size: 25px;
padding-right: 5px;
vertical-align: middle;
}
.entry-tags::before {
content: '\f323';
font-family: dashicons;
color: #666;
font-size: 25px;
padding-right: 5px;
vertical-align: sub;
}
view raw meta.css hosted with ❤ by GitHub

So in the above the 5 regular metas are targetted, swap in your desired icon font, Dashicons used in the example and tweak your alignment and padding to suit.

Custom Taxonomy

If you use custom taxonomies, another meta is available – .entry-terms , this will list all the terms associated with the custom taxonomy, just create another CSS block with the CSS selector and choose a relevant icon.

Leave a Comment





%d bloggers like this: