【发布时间】：2011-03-10 14:46:11
【问题描述】：
我发现 jquery UI 中的图标对于我的应用程序来说有点小。调整 .ui-icon 的大小当然没有帮助，因为图像是从单个图像文件加载的，所以它只会显示其他图标的一部分。
有什么方法可以调整图标大小，而不必为我想使用的每个大小调整图标图像文件的大小？
【问题讨论】：
标签： jquery-ui
【发布时间】：2011-03-10 14:46:11
【问题描述】：
这是一个老问题，但这是我的解决方案（如果你愿意，可以破解）：
.ui-icon-circle-close {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Chrome, Safari, Opera */
transform: scale(2);
}
对于只有图标的按钮，它非常有用。
【讨论】：
-
即使图标在实施 css 规则后看起来很糟糕，但它仍然有效。谢谢。
-
可能和
zoom:stackoverflow.com/questions/18696085/…一样
没有。因为图标被打包到 CSS sprite 网格中，所以如果您尝试使图标本身更大（如您所见），您只会看到它周围的图标。您可以通过调整边距来增加图标的“大小” - 但这不会使图形变大 - 只是它占用的空间。
编辑 - 看起来 jQuery UI 团队之前已经听说过这个投诉，并且会在 jQuery UI 的下一个版本中发送到 roll out some larger icons。
【讨论】：
-
当然，增加边距可以达到我的预期，但不幸的是并不能解决问题。我有一些老眼睛，我需要用更大的图标来取悦 :)
-
@adamnickerson - :-\ 是的，我完全理解。实际上，我刚刚发现了一篇博文，我认为会为你回答你的问题。请参阅上面我的答案中的更新...
-
感谢您找到该帖子——绝对期待下一个版本。干杯。
-
使用大图标的能力是否曾经在 jQuery 中实现过？
-
请参阅下面@SiliconValley 的回答。这可能是一个 hack，但它适用于 jQuery Mobile 1.4.5（使用 Cordova）。
试试这个http://mkkeck.github.io/jquery-ui-iconfont/
来源：https://github.com/mkkeck/jquery-ui-iconfont
它只需要包含 jquery-ui.icons.css 和 fonts 目录。
jquery 图标大小可以这样改变：
<style type="text/css">
.ui-icon {
font-size: 1.2em;
}
</style>
【讨论】：
请注意，您可以真正使用任何您想要的图标，只要您创建一个使用它的 CSS 样式，并且它不必在 sprite 包中。 jQuery UI Buttons 中的“图标名”实际上只是一个类名。
博客“Sit Down Waldo”有很好的例子here。它演示了使用最优秀的FAMFAMFAM 彩色图标集，但您确实可以使用他的“核心”来调整位置，然后在您自己的 CSS 中使用您想要的任何图标。
使用他的示例非常简单，只需下载文件（您只需要 css 和 icon 文件夹），然后将这些行添加到您的 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 个月前就谈到了它。他们确实让它们变大了一点，但并没有引入全新的尺寸。
【讨论】：
这是我的解决方案
使用任何你想要的 png 图标（在这个例子中 - 调整类替换）
.ui-icon-gripsmall-diagonal-se
{
background-color:#fff!important;
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%;
background-image:url('resize.png')!important;
background-position:center center;
background-size: cover!important;
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
将其缩放 2 倍，并在封面模式下放置招聘图标
【讨论】：