Is there a CSS bug in jQueryUI icons

i used the markup us开发者_运维问答ed this page jQueryUI Theme Roller the one with ui-state-error css class at the bottom right sidebar. the markup goes like below

<div class="ui-state-error ui-corner-all"> 
<p><span class="ui-icon ui-icon-alert"></span> 
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>

but to my surprise it doesn't look the same , the icon falls on it's own line [possibly because it's display is blocked]. Now is this a known css bug or Intended. If so what would my possible solution be, float these ui-icon elements left all the time ??

I couldn't put that on jsfiddle but JsBin did work here is the link Edit the Example on JsBin

This is not a bug from what I know, the way I have done it is like this: http://jsbin.com/agagep/5/ (did the css with jquery but actually have something like that in a css file), even if we want this to be like this it doesn't mean that everyone wants it, it lets the designer have more control over what is happening.

to make the icon stay in the middle of text try adding

.ui-icon-fix-by-max
{
    display: inline-block;
    vertical-align: text-bottom;
}

I don't know if there is a bug in the jquery ui theme. But I know they don't really look great like if they were not finished. You can have a look at this awesome theme for jquery ui theme : http://www.warfuric.com/taitems/demo.html and download here https://github.com/taitems/Aristo-jQuery-UI-Theme

Don't really answer the question but maybe can be useful to you.