Insert Catchy Title Here

I must admit that my motivation for the following implementation was purely out of laziness.  MonoRail didn't have a convenient way to generate an image wrapped in an anchor and rather than add a new method to HtmlHelper, testing, and submitting a patch, I wussed out and went another direction.  So, I have a standard set of png images to use as icons.  Each is 24x24 pixels.  Naturally when the icon is clicked I want to send the user to another page or possibly submit a form.  Let's start with the end and then get to the means.  Here is the resulting HTML.

<a href='/main/search.rails' class='icon search' title='Search'>Search</a>

Pretty straightforward.  Here is the CSS that turns that into a nice graphical link:

a.icon
{
   text-indent: -999em;
   width: 24px;
   height: 24px;
   position: relative;
   display: block;
   float: left;
} 

a.search
{
  background: url('searchIcon.png') top left no-repeat;
}

a.print
{
  background: url('printIcon.png') top left no-repeat;
}

/*

...

*/

The reason I like this approach is that I can guarantee consistent use of the same icons throughout the app.  I can also easily customize the icons for different customers.