I posted last week about Magic Icons that can change color with a simple CSS update using transparent images. That method required the image to be inline within the markup when attached to a heading (or similar) tag. Ben de Groot wrote in with a clever method using background-image and effectively setting the height and width to the size of the icon. Excellent, because not only are the colors of the icons changeable at a moments notice with CSS -- but the images themselves would be swappable and out of the markup completely:

h3 {
background: #696 url(icon.gif) no-repeat;
font-size: 0;
height: 13px;
width: 13px;
margin: 0;
padding: 0;
}

By Ben setting the font-size to 0, and setting the height and width to the exact dimensions of the icon used, he insures the backgound color will only show through the transparency of the image. Bravo.

But now we need to get the text within the h3 to show up next to it again. So, I added a second step and wrapped the text in a span tag (controversial yes, but this is just for demonstration) so that we could set a proper font-size on it. I also add the following CSS rule:

h3 span {
font-size: 11px;
font-family: verdana;
position: absolute;
padding-left: 18px;
color: #696;
}

The font-size could whatever you'd like, of course, and position: absolute; was what I found to work as far as pulling the text out of the height and width restrictions of previous h3 rules.

Here's an example (using inline styles):

This is a Heading

I've only tested in Safari, Camino and IE/Mac so far and I'd be interested in hearing how others fare. Interestingly, Safari is the reason for the margin: 0; padding: 0; on the h3. It wanted to center the entire heading without this. Odd, but padding and margins could be adjusted to something other than 0. Thanks to Ben for the clever idea!