Add an Icon to Blog Post Titles with CSS

Step One: 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 Two: 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 your custom 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:

1. 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.
2. The "no-repeat" value makes it so the image only appears once for each link.
3. "Left" places it to the left of the URL.
4. "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.

Variations

Now that you've got the idea, you might want to try one of these variations. Thanks to Joelle and Marina for their prompts in the comments!
These variations work in modern browsers, but aren't compatible with older versions of Internet Explorer. They don't cause any problems in older IE, they just don't show up.

Icon Above Your Title

If you'd like to place your icon above your title, find the class of the div surrounding your post using the class-finding methods described above. Once you've found the class, use this basic CSS:

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

I used ".post-outer" because I'm on Blogger. If you're on another platform, you may need to use a different class.
You can also center the icon above your post title if you prefer.

If you'd like to center the icon, the CSS is:

.post-outer:before {
content: url(YOUR IMAGE URL HERE);
display: block;
width: ICON WIDTH IN PX HERE;
margin: 0 auto;
}

Two Icons

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.

http://www.codeitpretty.com/2013/04/add-icon-to-blog-post-titles-with-css.html