How to Use the Icon Set for Bloggers

As part of our free web graphics section of the blog, we recently released an Icon Set for Bloggers. In the comments of that post, folks asked us if we’d explain how to use them into a theme.

Easy to Implement with the Genesis Framework

If you are running any of your sites on the Genesis Framework, using the icon set for bloggers is quite simple – and only requires a few steps.

First, let’s take a look at where the icon set for bloggers can even be used. There are two sections within the Genesis Framework where you can utilize these fine graphics – the post info section, and the post meta section.

The Post Info Section

Traditionally in all Genesis child themes the post info section can be found underneath the post title. Here’s an example taken from the Minimum child theme:

Post Info Section - Genesis Framework

You’ll see that there is an icon immediately to the left of the date and also the comments. Both of those show up as a result of CSS that is defined in the Minimum child theme’s style.css file. Here’s what that looks like:

.time {
	background: url(images/icon-time.png) no-repeat;
	padding: 2px 0 2px 21px;
}

.post-comments {
	background: url(images/icon-comments.png) no-repeat;
	margin: 0 0 0 10px;
	padding: 2px 0 2px 22px;
}

The Post Meta Section

Similarly in all Genesis child themes the post info section can be found at the bottom of each post, mostly likely directly above the author box. Here’s an example taken from the Minimum child theme:

Post Meta Section - Genesis Framework

You’ll see that there is an icon immediately to the left of the categories and also the tags. Both of those show up as a result of CSS that is defined in the Minimum child theme’s style.css file. Here’s what that looks like:

.categories {
	background: url(images/icon-categories.png) no-repeat;
	padding: 2px 0 2px 22px;
}

.tags {
	background: url(images/icon-tags.png) no-repeat;
	margin: 0 0 0 10px;
	padding: 2px 0 2px 20px;
}

Implementing the New Icons

As you can see from the CSS above, each icon is saved as an image – icon-categories.png, icon-comments.png, icon-tags.png and icon-time.png. If you want to replace the icons shown in the examples above with ones from the icon set for bloggers, all you need to do is rename each of the new icons with the file name from the style.css file. (Alternatively, you could change the image file name in the style.css file to match that of the file name of each corresponding icon.)

Upload Files to Your Server

Once you have that sorted, all you need to do is simply upload each of the icon files to the child theme’s images folder on your server. You may need to overwrite the default files from the theme if you chose the method of renaming the icons from our pack to icon-categories.png, icon-comments.png, icon-tags.png and icon-time.png.

If you choose to change the image file name in the style.css file to match that of the file name of each corresponding icon, make sure you upload the style.css file to your child theme’s folder.

If you have have any questions with this, feel free to ask in the comments below.

Comments

  1. Have I mentioned how much I love everything you guys do? Thanks for this!

  2. And that’s what I love about Genesis – by applying styles to everything, you made it super easy to customize with CSS!

    Great tut – nice and simple.

    • That was a decision that Nathan and I made back when we were building Genesis. Apply classes and filters to as much as possible, to give users and developers the easiest way to customize and make their own.

  3. Thank you for the update. This makes more sense to me than the original information.

    There are plenty of Genesis users who aren’t particularly adept at manipulating the inner workings of the framework. We will never be web developers, but we are keen to learn how to make the most of our purchase.

    I only use a tiny fraction of the framework’s capabiliities because of my limitations in understanding what it’s all about. I am learning very slowly and want to add to my skills.

    Thanks for the help.

    • Margaret – you’re most certainly welcome.

      We realize that not everyone using Genesis is a developer or WordPress coding fanatic. That is why we do our best to provide documentation on how to do things, so that those who aren’t as advanced can still have the ability to do what they think they can’t. ;-)

  4. Useful Brian
    Thanks for taking the time to show us how.

    With such regular posting you are becoming a real blogger. LOL

  5. Still waiting for old Revolution goodness to resurface, though! :)

  6. Thanks guys, you certainly make website development that little bit easier.
    A appreciate what you do.
    Cheers,
    Karl