Imageless RSS Feed Icon for Blogroll

Orange icon typically used for RSS feeds is nice but I had two problems with it:

First, it was too distracting when there are many of them together (i.e. blogroll).  Second, IE 6 sometimes fail to load such small images used many times in a single page.

Following is a modified version of a CSS-based solution suggested by Richard Soderberg which you can find in the comment section of my IE6 SP1 Small Image Loading Bug post.  This version has following changes:

  • Size was reduced.
  • Colors were toned down and inversed to reduce distraction.
  • Original look is restored when mouse is hovering over it.

CSS fragment follows:

.feedIconStyle {
 font-family: arial, helvetica;
 font-size: 8px;
 font-weight: bold;
 text-decoration: none;
 border: 1px solid;
 padding: 0px 2px 0px 2px;
 margin: 0px;
 vertical-align: middle;
}

.feedIconStyle, .feedIconStyle:link, .feedIconStyle:visited, .feedIconStyle:active {
 color: #FF9966;
 background-color: white;
 border-color: #FF9966;
}

.feedIconStyle:hover {
 color: white;
 background-color: #FF6600;
 border-color: #FFC8A4 #7D3302 #3F1A01 #FF9A57;
}

Usage Examples:

<a href=“blah“ class=“feedIconStyle“>XML</a>

<a href=“blah“ class=“feedIconStyle“>RSS 2.0</a>

Visit my blog to see how they look.  I use the logo in my blogroll.