Adding Icons After Post Title

I recently had a client who was doing podcasts with each article and wanted people to know they could also listen, so she wanted an icon after the title of each post like shown above.  One way to add the icon, would have been to simply put the code after each title, but since it was going to be for all posts, I thought I would make it easier for her and have it done through CSS.

1. First, be sure that your theme is using Font Awesome.  If the below doesn’t work, it’s probably because your theme isn’t and you can just install the Font Awesome plugin.
2.  Then add this code to your style.css file or custom CSS area.  As you can see, I’v only added this to my Article category, and you will need to customize this depending on what CSS covers your title.

.category-articles h2:after {
   color: #6C9312;
   content: "\f028";
   display: inline-block;
   font-family: "Font Awesome 5 Free";
   padding-left: 8px;
}

The code in the content line can be found on the Font Awesome website on the page of the individual icon.  For example, this one is listed here: https://fontawesome.com/icons/volume-up?style=solid

Click image to see bigger

If you’d rather add it by hand after the title itself, I didn’t see any problems, but be sure to see how it works with your permalinks and RSS feed, etc.  Here is the code I used after my title:

<i class=”fas fa-volume-up”></i>

Hope this helps you!  If it does, I’d love to know!