jQuery UIアイコントラブル - 表示される画像を取得するには

Question

jQuery UIアイコンを使用するアイコンを表示するだけです（アイコンを表示したり、改行しないなど）。私はjQuery UI themes for my pageを使用していながら、クリック可能な画像の行を取得

ここで私が試してみましたいくつかのもの：。

1: <div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/> 
2: <input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" /> 

1：完全にレイアウトをめちゃくちゃ 2：周りの私の余分な改行を与えます画像

- リクエストとして広いコンテキスト -

<tr class="ui-widget-content"> 
    <td>...</td> 
    <td> 
     <input name="xy" id="xy" type="text" size="5" /> 
     <input name="xz" id="xz" type="text" size="5" /> 
     <input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" /> 
    </td> 
    </tr> 

- スパン -

は上記と同じにspanリードを使用すると、アイコンが表示されますが、独自の行にされています。

<span class="ui-icon ui-icon-carat-1-n"></span> 

Answer 1

私はキーがアイコンコンテナを作ることを考えていますdisplay: inline-block。

<div style="display: inline-block" class="ui-state-default"> 
    <span class="ui-icon ui-icon-lightbulb"></span> 
</div> 

http://jsfiddle.net/2U5TN/1/を参照してください。

また、このページが便利です：http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html。 jQuery UI CSSで使用できるすべてのアイコンが表示されます。

Answer 2

falseにテキストを設定するのjQuery UIサイトにhttp://jqueryui.com/demos/button/#toolbar

をツールバーの例を使用し、単にアイコンが表示されます：

$("#beginning").button({ 
      text: false, 
      icons: { 
       primary: "ui-icon-seek-start" 
      } 
     }); 

また、彼らはテキストを使用して表示されますボタンの状態を追跡するための値。この例の再生/一時停止と停止ボタンを確認してください。