jQuery UIからハイライトの色付きアイコンを箇条書きポイントとして取得しますか？

Question

私のjQuery themebuilderのテーマには、5つの異なるui-icons_ *ファイルがあります。 2つは、ハイライトカラーに対応するオレンジ色の色調です。 オレンジ色のアイコンを弾丸として使用したいと考えています。

私の最初の試みは、自分の行にアイコンを表示します。

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

2回目の試行でアイコンが表示されますが、正しく配置されていません。次のスタイルを追加する

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

は、テキスト、アイコンに合わせます：

.heading { vertical-align: top; } 

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

私がいることを追加しますので、もし私が欲しい色は、UIステートのアクティブセット内にあります状態を収容するユニットに渡すと、正しい色が得られますが、エンチャラダ全体（境界線、背景色、テキストの色）で、弾丸がオレンジ色になります。

<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/

私は、CSSを書き換えることなく、jQueryのテーマで特定のUI状態からだけアイコンを得ることができますか？

これができない場合は、どのようにお勧めしますか？その理由は何ですか？

SOLUTION

スタイルシート：

.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

あなただけの特定のUI状態のアイコンを取得したい場合は、これを行うことができます：

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

これは、jQueryのデフォルトのテーマアイコンセット（デフォルトで4つのアイコンセット - アクティブ、デフォルト、ハイライト、エラー）で指定されたアイコンを表示します。境界線などを削除する場合は、独自のcssでui-stateクラスをオーバーライドする必要があります。たとえば、.ui-state-active { border: 0px; }

ありがとうございます。