使用 jQuery UI 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7290857/
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
Using jQuery UI icons
提问by Randomblue
jQuery UI comes with handy icons in a sprite image; see the themeroller.
jQuery UI 在精灵图像中带有方便的图标；请参阅主题滚轮。
I have an inputelement for which I want the clock icon (with class .ui-icon-clock) as background image. How do I have a background icon to an input?
我有一个input元素，我想要时钟图标（带有 class .ui-icon-clock）作为背景图像。我如何有一个背景图标input？
回答by BZink
just use an empty span and add the jQuery UI classes.
只需使用一个空跨度并添加 jQuery UI 类。
<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />
You have to override the display style to make it inline-block rather than block otherwise the input will be pushed to the next line.
您必须覆盖显示样式以使其成为内联块而不是块，否则输入将被推送到下一行。
Other than that, I'm not sure exactly what you're after when you say make the clock the background image.
除此之外，当您说将时钟设为背景图像时，我不确定您到底在追求什么。
回答by Joe Valeriana
You can do that with JQuery UI script.
您可以使用 JQuery UI 脚本来做到这一点。
JS:
JS：
$(function() {
$("input").button({
icons: {
primary: ".ui-icon-clock"
},
text: false
})
});
HTML:
HTML：
<input>some text</input>
回答by Alon Eitan
$( "span").css({
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px;
});
