Howto: Make a great big feed icon for your site, XHTML/CSS

Yesterday, I introduced my, VERY LARGE, feed icon in my sidebar. You might think it’s overkill, but I really want to stress to people the ease of using RSS feeds, and therefore I wanted to give them an obvious way to do so. Hence the very large feed icon.

(I was sitting in my living room about 15 feet from my desktop PC with my site pulled up, and all I could decipher was the giant orange feed icon! That’s when you KNOW you’ve got a noticeable icon

So, if you ever wanted to have a similar icon on your site to promote you feed, here’s how to accomplish it like I did.

First of all, I downloaded the feed icon package from feedicons.com. I chose the 128×128px version, but you can pick whichever one you need (just be sure to remember the dimensions of the icon you chose so you can adjust your CSS code later).

Next, you’ll want to write the basic XHTML markup:

<div id="feed-me">
	<a href="#">Subscribe<br />to my feed</a>
</div>

This is basically just a DIV container with an anchor element inside. Obviously, you’ll want to change the url to the one of your feed.

Next, we need to style the DIV so that it matches the dimensions of our button:

#feed-me {
	display: block;
	width: 128px;
	height: 128px;
}

We’ll also want to give our DIV a background image (the feed icon):

#feed-me {
	background-image: url(/sandbox/icon-feed128.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	width: 128px;
	height: 128px;
}

One last thing. Since we want our link text to show up under our feed icon, we need to make the DIV slightly longer than the button is. In this case, we’ll make the height 192px:

#feed-me {
	background-image: url(/sandbox/icon-feed128.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	width: 128px;
	height: 192px;
}

Ok, so we have our button, now we need to style the link to get our text to display below the feed icon:

#feed-me a:link, #feed-me a:visited {
	display: block;
	width: 128px;
	padding-top: 135px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #293AAE;
	text-decoration: none;
	text-align: center;
}

Ok, I’ll explain this. We want to make the link the same size and type as the parent DIV, so we give it the same dimensions and display properties. The padding-top is to push the link text down to below the icon. I also made the text blue, 16px Arial font, with no decoration.

Alright, now that we have a button, let’s make it do something when we hover over it. In this case, we’ll add a text-decoration of “underline”, but you can replace the background image, make the text bold, or whatever you might want. For now, we’ll just go with an underline:

#feed-me a:hover {
	text-decoration: underline;
}

Cool!!! Now, we put the whole thing together and watch it in action… (click here for the source code)

By the way, once you edit your blog’s css to include the css style, all you have to do is insert the markup into your blog’s template (I just used a widget, but you can just as easily edit the sidebar code manually).

Since we’re on the topic, have you subscribed to my feed yet? What are you waiting for? Of course, you can always just get my feed via email…

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader. If you don't have a feed reader, you can always have these articles delivered to your email inbox every day. Click here to sign up.

Recent Posts