Using jQuery UI icons

Question

jQuery UI comes with handy icons in a sprite image; see the themeroller.

I have an input element 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?

Answer 1

just use an empty span and add the jQuery UI classes.

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

Answer 2

You can do that with JQuery UI script.

JS:

$(function() {
   $("input").button({
     icons: {
       primary: ".ui-icon-clock"
     },
     text: false
   })
});

HTML:

<input>some text</input>

See http://jqueryui.com/button/#icons

Answer 3

$( "span").css({ 
width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px; 
});