Hello, why does the icons do a br> itself
Heres what i mean:
Source:
.ui-icon-bullet { background-position: -80px -144px; }
<span class="ui-icon ui-icon-bullet"></span> Hello
Add a comment
|
2 Answers
If you take a look at the JQuery UI CSS theme file, you will notice that
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
So any element with the class ui-icon will be displayed as a block (therefore a <br /> before and after) You can change this behavior by applying a float left to your icon element to make it left of your text
Something like
<span class="ui-icon ui-icon-bullet" style="float:left;"></span> Hello
will do
Comments
My solution had some structure already in place. The places I wanted the icons to flow next to the text were contained in a div with a known class. I was able to add to my main site the css to override the ui-icon's "display:block" to "display:inline-block"
HTML
<div class="sectionActions">
Section Names <span class="ui-icon ui-icon-close"></span>
</div>
CSS
.sectionActions .ui-icon
{
display: block-inline;
}
This css precedence blocked the original "display: block" css from the jquery-ui files and all of my ui-icons displayed correctly on the same line.
Keith
