jQuery UI 图标麻烦 - 如何只显示图像

Question

使用 jQuery UI 图标，我只想显示与其余图标一致的图标（“只显示图标，没有换行符等）。基本上，我想在使用 我的页面的 jQuery UI 主题。

这里有一些我尝试过的事情：

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 导致与上面相同，图标显示但在它自己的行中。

  <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

使用 Jquery UI 站点上的工具栏示例 http://jqueryui.com/demos/button/#toolbar< /a>

将文本设置为 false 只会显示图标：

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

看起来他们还使用文本值来跟踪按钮的状态。检查示例中的播放/暂停和停止按钮。