jquery UI icons issue

Question

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

Answer 1

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