Question

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

有人可以帮我制作this中的图标，使其看起来像these吗？

Answer 1

您必须在容器和图标中添加一些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

Answer 2

由于您正在丢失悬停/活动状态，因此您无法完全匹配功能，但是您可以通过添加一些填充并将li设置为内联块来使其非常接近。

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

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

正确显示jQuery UI图标

2 个答案: