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.

blog post with dashicon border - image

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

2014 blog post with dashicon border

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.

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


Comments

5 responses to “Add Dashicons to Your WordPress Post”

  1. Annabel says:

    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 :)

    • Marcy Diaz says:

      You’re welcome, Annabel. Yes, if you want a different icon for each category, you would use:

      .category-categoryslug.entry:after {
          background-color: #f5f5f5; /* color behind the dashicon */
          border: 2px solid #ccc; /* circle border width */
          color: #999; /* dashicon color */
          content: "\f464"; /* pencil dashicon */
       }

      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

  2. Scot Birch says:

    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

Leave a Reply

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