You can add a font icon and a border to your WordPress website pages or posts or widgets. This tutorial shows you how use dashicons in a border on your posts.
Many themes now have dashicons enqueued in the theme functions.php, but if yours doesn’t, you can read more about how to add dashicons to your theme.
Use Dashicons to Add An Icon to the Bottom of Each Post
The first example adds the dashicon to the bottom of posts in the Genesis Sample theme. The second example adds them to the top of the posts in the Twenty Fourteen theme.
For Genesis Sample Theme
This is the CSS to add to your custom CSS editor or to your style.css just before the @media
section. The CSS is commented for explanation.
/* CSS to Add Bottom Border with Dashicon */
.entry {
border-bottom: 1px solid #ccc; /* creates bottom border */
position: relative; /* required so position:absolute works for entry:after */
text-align: center;
}
.entry:after {
background-color: #f5f5f5; /* color behind the dashicon */
border: 2px solid #ccc; /* circle border width */
border-radius: 50%; /* circle */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
color: #999; /* dashicon color */
content: "\f464"; /* pencil dashicon */
display: block;
-webkit-font-smoothing: antialiased;
font: normal 48px/1 'dashicons'; /* change 48px to change size of dashicon */
height: 60px; /* height of circle image */
line-height: 60px; /* height of circle image */
position: absolute; /* required to position image */
bottom: -30px; /* half circle height to center image on line */
left: 50%; /* needed to center image */
margin-left: -30px; /* half width of circle; needed to center image */
text-align: center;
width: 60px; /* width of circle */
}
For Twenty Fourteen Theme
The Twenty Fourteen theme has two views – grid view and list view. You only want the dashicon on the list view posts. And a border already exists at the top of each post in list view, except on the first post. So for the first post, the border and padding have been added back in.
This is the CSS to add to your custom CSS editor. The CSS is commented for explanation.
/* CSS to Add Top Border with Dashicon */
.list-view .site-content .hentry {
border-top: 1px solid rgba(0, 0, 0, 0.1); /* existing */
padding-top: 48px; /* existing */
position: relative; /* required so position:absolute works for :before */
}
.list-view .site-content .hentry:first-of-type {
border-top: 1px solid rgba(0, 0, 0, 0.1); /* was 0 */
padding-top: 48px; /* was 0 */
}
.list-view .site-content .hentry:before {
background-color: #f5f5f5; /* color behind the dashicon */
border: 2px solid #ccc; /* circle border width */
border-radius: 50%; /* circle */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
color: #999; /* dashicon color */
content: "\f464"; /* pencil dashicon */
display: block;
-webkit-font-smoothing: antialiased;
font: normal 48px/1 'dashicons'; /* change 48px to change size of dashicon */
height: 60px; /* height of circle image */
line-height: 60px; /* height of circle image */
position: absolute; /* required to position image */
top: -30px; /* half circle height to center image on line */
left: 50%; /* needed to center image */
margin-left: -30px; /* half width of circle; needed to center image */
text-align: center;
width: 60px; /* width of circle */
z-index: 2; /* to keep it on top of other layers */
}
You can modify the CSS to add the dashicons where you want them. Be sure to look at the full set of icons, so you can choose those that you want for your theme.
5 responses to “Add Dashicons to Your WordPress Post”
Great tutorial Marcy! Thank you for taking the time to write it and help others. Quick question … is there an easy way to customise/change the icon shown depending on the category or tag of a post? Thank you :)
You’re welcome, Annabel. Yes, if you want a different icon for each category, you would use:
And then you can edit the dashicon and colors for each category.
If your category slug is “chocolate-desserts”, you would use:
.category-chocolate-desserts.entry:after
Wonderful :) Thanks for such a quick and helpful reply!
I sent you a message in Fb. I was googling something and landed here. So, I thought that I would show my support on your post.
-Scot
Thank you, Scot! :-)