Question

In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.

My first attempt gives the icon on it’s own row.

<div class="heading">
    <span class="ui-icon ui-icon-triangle-1-e" ></span>
    Meeting
</div>

My second attempt gives the icon but not aligned properly.

<div class="heading">
    <span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
    Meeting
</div>

Adding the following style makes the text align with the icon:

.heading { vertical-align: top; }

http://jsfiddle.net/rypyP/1/

The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.

<div class="heading ui-state-active">
    <span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
    Meeting
</div>

http://jsfiddle.net/MEXQV/1/

Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?

If that is not possible, what way would you suggest and why?

SOLUTION

Stylesheet:

.heading
{
    vertical-align: top;
}

Html:

<div class="heading">
    <span class="ui-state-active" style="border: 0px">
        <span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
        </span>
    </span>
    Meeting
</div>

http://jsfiddle.net/rypyP/4/

Answer 1

If you just want to get the icon of a particular ui-state, you can do this:

<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>

What it does is it will look the specified icon on jQuery’s default theme icon set (it has four icon sets by default — active, default, highlight, and error). If you want to remove the borders etc, you’ll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }

Thanks.