如何將每個CSS的jQuery UI圖標設置為背景圖像？

Question

如何將每個CSS容器的jQuery UI圖標設置為背景圖像？

就像是：

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

更新

如何使以下文本顯示在圖標的右側？

<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

您必須應用相應的CSS類：

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

假設您具有定義了這些類的正確jQuery UI .css文件。 如果查看jQuery .css文件，您會發現它使用background-position在CSS sprite中查找圖標。

請查看Themeroller上圖標的樣式作為示例 。

Answer 2

我會用：

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

但是，由於某種原因，如果您需要在自己的類中使用CSS：

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

Answer 3

要獲得該圖標，您可以直接將精靈指向加號。

 .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"); }