正確顯示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