如何将每个CSS的jQuery UI图标设置为背景图像？

Question

How can I set a jquery ui icon as a background image per a css container?

Something like:

.MyClass {
  background: url("ui-icon-plus");
}

// Existing div...want to add icon to left-align
<div class="MyClass">
   //Other stuff in there that expands and collapses
</div>

UPDATE

How can I get the following text to appear to the right of the icon?

<div class="MyClass">Whatever</div> <!-- no workee--> 
<div class="MyClass"><span class="MC">Whatever</span></div> <!-- works --> 

 .MyClass {
      width: 16px; height: 16px; background-image: url("../../Content/themes/base/images/ui-icons_222222_256x240.png")/*{iconsContent}*/;
      background-position : -16px -128px; 
}
.MC {
   padding-left: 20px;   
}

Answer 1

You have to apply the corresponding CSS class:

<div class="ui-icon ui-icon-plus"></div>

Assuming that you have the correct jQuery UI .css file with those classes defined. If you look at the jQuery .css file you'll see that it is using background-position to find the icon in the CSS sprite .

Look at the styles of the icons on Themeroller for examples .

Answer 2

I would use:

<div class="ui-icon ui-icon-plus"></div>

But if you need the css in your own class for some reason:

.MyClass { width: 16px; height: 16px; background-image: url(images/ui-icons_333333_256x240.png); background-position: -16px -128px; }

Answer 3

To get the icon you can directly refer the sprite like for plus.

 .MyClass {
width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/;
background-position: -16px -128px; 

}

Answer 4

您需要调用图像的绝对位置，例如：

.MyClass { background: url("http://yourdomain.com/somefolder/ui-icon-plus.ext"); }