在jQuery-UI中调整图标大小

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版本中推出一些更大的图标.

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样式,您就可以使用任何所需的图标,并且它不必在精灵包中.jQuery UI Buttons中的"图标名称"实际上只是一个类名.

博客"Sit Down Waldo" 在这里有很好的例子.它演示了使用最优秀的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,遗憾的是,即使7个月前他们谈到它,jQuery UI的新尺寸选项也不会发生.他们确实让他们变得更大,但他们没有引入一个全新的尺寸.