Magic Icons: Image-less Markup Version

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!

2 Comments

  1. Peter Cooper says:

    This caused problems for me. I got it to work with Mozilla/Windows, but in IE6/Windows it just wrapped the text.
    I came up with an alternate solution after a lot of trial and error, and swearing, for about 15 minutes. It produces identical results in Mozilla and IE6.
    I can’t be bothered converting all of my code to friendly elements to put it here, so I’ve put it in this text file (http://www.bigbold.com/temp/icontrick.txt)
    Let me know if it works on the Mac.

  2. Peter Cooper says:

    I think I’ve found a better alternative already.. much more search engine and ‘tidy HTML’ friendly :-) See icontrick2.txt