How To:Add Icons To Post-Title In Blogger

Add icon before post title

»Who Can Use This Tutorial

If you can add CSS to your blog, you can do this! Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're all set. Wordpress.com users will need the Custom CSS upgrade.

»Before You Get Started

You'll need two things to use this tutorial: an icon, and the class name of your post titles.The icon is up to you, but I'll show you how to find your post title class name.
Blogger & Typepad users who use a standard template and haven't made changes to the post title class, your post title classes are:

• Blogger: post-title
• Typepad: entry-header

Wordpress title classes vary by theme. If you're on Wordpress, or you've made changes to your Blogger or Typepad template classes, here are two ways to find your post title class.

1. Use your browser's developer tools. If you're using Firefox or Chrome, you can
use your browser's developer tools to identify your post title class by right-clicking a post title and selecting "Inspect Element" from the menu.

2. Check your blog's source code . Using your browser's "View Source" option,open up your blog's source code. Find a post title within your source, and find its class. The class might be inside your post title's link element, or nearby in the code. It's usually something like post-title, entry-title, headline, etc.
Once you have your icon and,you've found your post title's class, you're ready to add your title icon!

• Step-1:Upload Your Icon

Blogger users, upload the icon to your blog's Picasa Web Album . Wordpress users, upload the image to your media library . Typepad users, upload the image to the File Manager.You can also use Photobucket or another image hosting service if you prefer. Wherever you upload it, copy the direct link to the image. You'll need that soon.

• Step-2:Add the CSS 

You only need to add this CSS to your template once and the icons will appear on every post title.
In Blogger, go to Template>Customize>Advanced>Add CSS.
If you're on Typepad, go to Design>Custom CSS. On Wordpress yourcustom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.
I'm going to demonstrate this with the class .post-title, since I'm on Blogger. Remember to change it if you blog elsewhere!
Here's the basic CSS:

.post-title {
background: url(ICON-IMAGE-URL-HERE) no-repeat left transparent;
    padding-left: 15px;
    }

Now that you've seen the CSS, let me break it down for you!

• »In the first line, the selector (.post-title in the example) tells the CSS to style all the links with the class post-title.

Again, change that if .post-title isn't your class. Don't forget the dot (.) in front of the class name!
The next line has four parts:

• Background: url(ICON-IMAGE-URL-HERE) sets a background image for the selected titles. Replace the text inside the parentheses with the direct link to your icon image.
• The "no-repeat" value makes it so the image only appears once for each link.
• "Left" places it to the left of the URL.
• "Transparent" sets the background color of the link and its associated icon. The last line, padding-left: 15px; , creates a bit of room between the icon and the beginning of your post title. You may need to adjust the padding size, 15px is just a starting point.

Two Icons(Icon_POST-TITLE_Icon)

If you'd like to add two icons to either side of your title, you can use :before and :after content to place the image. If you use this method, the second icon will be placed at the end of your title's text, like in these examples:
Here's the basic CSS:

.post-title:before,
.post-title:after {
content: url(YOUR IMAGE URL HERE);
}

Remember that I used .post-title because I'm on Blogger. If you're on a different platform, be sure to change the selector if needed