A little icon next to your post title is a cute way to bring the design elements of your theme into your blog posts. And, it's easy to do with a bit of CSS! You'll probably spend more time choosing the perfect icon than you will on adding the CSS to your blog.
Demo
For a live demo, visit codeitpretty.blogspot.com, where I've added a heart icon to each of the post titles.
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.
- 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.
- 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 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-titlein 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! 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.
The next line has four parts:
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.
