javascript jQuery UI 图标问题 - 如何只显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6962483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Icons trouble - how do I get just the image displayed
提问by Horst Walter
Using jQuery UI icons I just want to display the icon in line with the rest ("just display the icon, no line breaks etc.). Basically I want to get a row of clickable images, while I am using jQuery UI themes for my page.
使用 jQuery UI 图标我只想显示与其余图标一致的图标（“只显示图标，没有换行符等）。基本上我想获得一行可点击的图像，同时我使用jQuery UI 主题作为我的页。
Here some things I have tried:
这里有一些我尝试过的事情：
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: completely messing up the layout. 2: gives my an extra line break around the image
1：完全搞乱了布局。2：在图像周围给我一个额外的换行符
-- as request wider context --
-- 作为请求更广泛的上下文 --
<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 --
- 跨度 -
Using spanleads to the same as above, icon is displayed but in its own line.
使用span与上述相同的引线，显示图标但在其自己的行中。
<span class="ui-icon ui-icon-carat-1-n"></span>
回答by William Niu
I think the key is to make the icon containers display: inline-block.
我认为关键是制作图标容器display: inline-block。
<div style="display: inline-block" class="ui-state-default">
<span class="ui-icon ui-icon-lightbulb"></span>
</div>
See this example: http://jsfiddle.net/2U5TN/1/.
请参阅此示例：http: //jsfiddle.net/2U5TN/1/。
Also, you may find this page useful: http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html. It displays all possible icons you can use with jQuery UI CSS.
此外，您可能会发现此页面很有用：http: //jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html。它显示了您可以与 jQuery UI CSS 一起使用的所有可能的图标。
回答by Chris Lucian
Use the toolbar Example on the Jquery UI site http://jqueryui.com/demos/button/#toolbar
使用 Jquery UI 站点上的工具栏示例http://jqueryui.com/demos/button/#toolbar
Setting text to false will just show the icon:
将 text 设置为 false 只会显示图标：
$( "#beginning" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
It also appears they use the text value to keep track of the state of the button. Check the play/pause and stop buttons in the example.
他们似乎还使用文本值来跟踪按钮的状态。检查示例中的播放/暂停和停止按钮。
