Using UI icons inline

Using UI icons inline


I don't know about others, but the fact that "ui-icon" makes the SPAN
a block element ruins most page-layouts.
So, when I want to use jQuery UI icons, I instead do this so that they
behave:
<img class="ui-icon ui-icon-cancel" src="/images/spacer.gif"/>
With this CSS:
img.ui-icon {
height: 16px;
width: 16px;
position: relative;
display: inline;
}
The spacer.gif is a 1x1 pixel transparent image. This way the
background-image can be seen. The reason why this works is that the
IMG tag, although an inline element, respects height & width
properties, whereas other inline elements do not. This is why jQueryUI
chose to make the ui-icon a block level element I believe.
If you use this solution, you get the benefit of inline images but
with the quick loading times of jQueryUI icons.
Hope that helps some people