Css 扩展jqueryui'；s图标

在我的一个项目中，我需要扩展jQueryUI图标的图标调色板。我需要稍大一点（22x22）和色彩鲜艳的

所以我看了一下jQueryUI是如何创建图标的，并对我的图标做了同样的操作。我希望我的“扩展”尽可能像jQuery UI一样，所以我也开始覆盖一些css类。我的想法是

<div class="ui-rw-icon">
    <span class="ui-icon ui-icon-pencil"></span>
</div>

这很好，我的图标会显示出来。唯一的问题是，这些图标比jQuery UI的图标大6个像素，有时我想重新定位它们，使它们更适合。举个例子

<button name="pencil" class="menubar-button ui-rw-icon" id="menubar-meassure">Measures</button>
<button name="script" class="menubar-button" id="menubar-newmeasure">New Measure</button>

<script>
$('.menubar-button').each(function() {
        $(this).button({
            icons: {
                primary: "ui-icon-" + $(this).attr("name")
            }
        })
    });

</script>

所以我想我可以在这里做与使用

背景图像

属性相同的事情：

.ui-rw-icon .ui-button-icon-only .ui-icon,
.ui-rw-icon .ui-button-text-icon-primary .ui-icon,
.ui-rw-icon .ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon .ui-button-text-icons .ui-icon,
.ui-rw-icon .ui-button-icons-only .ui-icon {
     top: 40%;
}

但这不起作用。Opera dragonfly和Firebug都告诉我定位规则来自

jquery-ui-1.9.0.custom.css

，而不是我的

rw-ui.css

。

按钮（）

函数创建了以下代码：

<button name="pencil" class="menubar-button ui-rw-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" id="menubar-" role="button" aria-disabled="false">
  <span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
  <span class="ui-button-text">Measures</span>
</button>

这是一个很小的变化，但很重要。

• 为使自定义图标生效，应调用css文件 在jQueryUICSS之后
• 如果您的样式仍然没有得到应用，请在定义CSS路径时尝试向上一级，即如果您的HTML是：

  <div id="menubar">
      <button id="measures">Measures</button>
  </div>
  

  <button name="pencil" class="menubar-button ui-rw-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" id="menubar-" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
    <span class="ui-button-text">Measures</span>
  </button>
  

  .ui-rw-icon.ui-button-icon-only .ui-icon,
  .ui-rw-icon.ui-button-text-icon-primary .ui-icon,
  .ui-rw-icon.ui-button-text-icon-secondary .ui-icon,
  .ui-rw-icon.ui-button-text-icons .ui-icon,
  .ui-rw-icon.ui-button-icons-only .ui-icon {
       top: 40%;
  }
  

  <div id="menubar">
      <button id="measures">Measures</button>
  </div>
  

      #menubar .ui-rw-icon.ui-button-icon-only .ui-icon,
      #menubar .ui-rw-icon.ui-button-text-icon-primary .ui-icon,
      #menubar .ui-rw-icon.ui-button-text-icon-secondary .ui-icon,
      #menubar .ui-rw-icon.ui-button-text-icons .ui-icon,
      #menubar .ui-rw-icon.ui-button-icons-only .ui-icon {
           top: 40%;
      }