Add Dashicons to Your WordPress Post

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.