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.