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>