Code Snippets
Once you've downloaded the icon, there's lots you can do it. Here's a few examples of different ways you can use it with minimal HTML and CSS.
Use Within a Paragraph
In some cases, you might want to link to a feed within a paragraph. To eliminate having to add descriptive text to let users know the link is to a feed, you can simply place the icon before the text that is linked to the feed.
Example:
While you're here, subscribe to our feed.
HTML:
<a href="#" class="feed">subscribe to our feed</a>
CSS:
.feed {
margin-left: 3px;
padding: 0 0 0 19px;
background: url("../images/feed-icon-14x14.png") no-repeat 0 50%;
}
Display a List of Feeds
If your website or blog has more than one feed, you could present all available feeds as a list.
Example:
HTML:
<ul class="feed-list">
<li><a href="#">All Posts</a></li>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Comments</a></li>
</ul>
CSS:
.feed-list {
margin: 0 0 15px 15px;
padding: 0;
list-style-type: none;
}
.feed-list li {
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
}
.feed-list li a {
padding: 0 0 0 19px;
background: url("../images/feed-icon-14x14.png") no-repeat 0 50%;
list-style-type: none;
}
Simple CSS Button
Drawing a little extra attention (if the icon alone isn't enough for you) can be done a few ways. This example uses only CSS to add a bit of flare.
Change the hex values to match your design. An easy way to get all the colours you need is to create a shape in Photoshop and fill it with the colour you would like for the face of the button, then apply some layer effects. Add 'Bevel and Emboss' and set the size to 0. This will give you a thin bevel similar to that of the example buttons below. Use the eye dropper tool to get the hex values of each edge and replace the border colour values appropriately.
Examples:
HTML:
<p class="feed-button"><a href="#">Comments Feed</a></p>
CSS:
.feed-button {
padding: 10px 0;
}
.feed-button a {
color: #666;
padding: 10px 15px 10px 36px;
background: #ccc url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
border-top: 1px solid #e2e2e2;
border-right: 1px solid #818181;
border-bottom: 1px solid #565656;
border-left: 1px solid #d7d7d7;
}
.feed-button a:hover {
color: #444;
background: #eee url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
border-top: 1px solid #f5f5f5;
border-right: 1px solid #969696;
border-bottom: 1px solid #646464;
border-left: 1px solid #f2f2f2;
}