Question

我发现jquery UI中的图标对我的应用来说有点小。调整.ui-icon上的尺寸当然没有用，因为图像是从单个图像文件加载的，所以它只显示其他图标的部分。

有没有办法调整图标大小而无需调整每个我想使用的尺寸的图标图像文件？

Answer 1

这是一个老问题，但这是我的解决方案（如果你愿意，可以破解）：

.ui-icon-circle-close {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Chrome, Safari, Opera */
  transform: scale(2);
}

对于仅限图标的按钮，效果很好。

Answer 2

没有。因为图标被打包到CSS精灵网格中，所以如果你试图让图标本身更大（你看到），你只会看到它周围的图标。您可以通过调整边距来增加图标的“大小” - 但这不会使图形变大 - 只是它占用的空间。

编辑 - 看起来jQuery UI团队之前已经听过此投诉，并且将在下一版jQuery UI中发送roll out some larger icons。

Answer 3

试试这个http://mkkeck.github.io/jquery-ui-iconfont/

来源：https://github.com/mkkeck/jquery-ui-iconfont

需要只包含jquery-ui.icons.css和字体dir。

jquery图标大小可以像这样改变：

<style type="text/css">
    .ui-icon {
        font-size: 1.2em;
    }
</style>

Answer 4

请注意，只要您创建使用它的CSS样式，您就可以使用任何所需的图标，并且它不必在精灵包中。

博客“Sit Down Waldo”有很好的例子here。它演示了使用最优秀的FAMFAMFAM颜色图标集，但您可以真正使用他的“核心”调整定位，然后在您自己的CSS中使用您想要的任何图标。

使用他的示例非常简单，只需下载文件（您只需要css和图标文件夹），然后将这些行添加到HTML文件中

<link href="libs/famfamfam/css/fff.icon.core.css" type="text/css" rel="stylesheet"/>  
<link href="libs/famfamfam/css/fff.icon.icons.css" type="text/css" rel="stylesheet"/>

然后在您的选项中使用其中一个图标名称 {icons: {primary: 'fff-icon-connect'},text: false}

PS，遗憾的是，看起来jQuery UI的新大小选项已经发生了，即使他们在7个月前谈过它。他们确实让它们变得更大，但它们没有引入一个全新的尺寸。

在jQuery-UI中调整图标大小

4 个答案: