CODEWITHSUNDEEP
jqueryjquery-ui
Randomblue
Randomblue

Reputation: 116263

Using jQuery UI icons

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?

Upvotes: 40

Views: 56814

Answers (3)

Joe Valeriana
Joe Valeriana

Reputation: 610

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

Upvotes: 6

BZink
BZink

Reputation: 7947

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.

Upvotes: 52

Alon Eitan
Alon Eitan

Reputation: 12025

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

Upvotes: 4

Related Questions