正确显示jQuery UI图标

Question

我一直在试图创建包含两个图标的图标集，我试图做的是导入jQuery UI css文件并从示例复制html，但它不起作用。

有人可以帮我制作this小提琴的图标看起来就像these？

Answer 1

你不会得到它在功能上完全一致，因为你失去悬停/活动状态，但您可以通过添加一些填充并将li设置为内联块来使其非常接近。

li{ 
    display:inline-block; 
    margin:.25em 0 0 .25em; /*Just for spacing in the demo*/ 
    padding:.25em; 
} 

http://jsfiddle.net/RKwky/3/

Answer 2

你有一些CSS添加到容器和图标：

li.ui-state-default { 
    padding: 4px 0; /* this will add some space top/bottom */ 
    float: left; /* LI is a block by default so it take full width */ 
    /* display: inline-block; you could also use inline-block instead of float */ 
} 

.ui-icon { 
    margin: 0 4px; /* this gives the icon left/right space */ 
}​ 

DEMO