jQuery UI images?

I'm using the jQuery datatables plugin (which is awesome BTW), but the default UI & images don't match or work too well with what I have. I've tried adding jQuery UI to my开发者_如何学Python project and using it - but it looks like it might be a little heavy handed for what I want (mainly to use the sort & pagination icons). However, it looks like the icons in jQuery UI are all in one image...interesting.

My question is, how can I use the individual icons from the jQuery UI plugin in my project?

TIA

It's one image by design. It's a technique called Image Sprites that's used to reduce the number of resources to download to the client. You should use CSS to only show one icon in the image sprite.

you need to add the correct classes:

• class ui-icon - sets the size of the div to 16x16
• class ui-state-x - picks the color
• class ui-icon-yyy - specificies the 'offset' within the .png for the upper left corner of 16x16 grid

<div class="ui-icon ui-state-default ui-icon-plus">&nbsp;</div>
<div class="ui-icon ui-state-active ui-icon-plus">&nbsp;</div>
<div class="ui-icon ui-state-error ui-icon-plus">&nbsp;</div>