在自定义工具栏中使用jQuery UI主题

Question

我想在我自己的工具栏中使用jQuery UI主题，而不使用jQuery本身。

我：

<div class="toolbar ui-widget-header ui-corner-all"> 
    <a href="#" class="ui-icon ui-icon-circlesmall-close">close</a> 
    <a href="#" class="ui-icon ui-icon-circlesmall-plus">open</a> 
</div> 

CSS：

.toolbar { 
    height:28px; 
} 
    .toolbar a { 
     display:inline-block; 
     height:24px; 
     width:24px; 
    } 

它的工作原理，但是当我设置填充或大小的一个HREF中我没有得到一个不错的中心上的按钮，因为图标它会在图标文件中显示图标和周围图标的一部分。

是否有可能纠正这个问题？

Answer 1

您可以使用余量而不是填充。这将保持图标居中。

.toolbar { 
    height:28px; 
} 
.toolbar a { 
    display:inline-block; 
    height:16px; 
    width:16px; 
    margin:6px; 
} 

Answer 2

我找到了答案在这里：

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

它看起来它需要合适大小的单独的跨度，以防止图标文件显示周围的图标（精灵）。