在jQuery-UI中调整图标大小

我发现jQuery UI中的图标对于我的应用程序来说有点小。调整.ui-icon的大小当然没有帮助，因为图像是从单个图像文件加载的，因此它只会显示其他图标的部分。在jQuery-UI中调整图标大小

有没有任何方法可以调整图标大小，而无需调整每个大小的图标图像文件的大小我想要使用？

来源

2011-03-10 adamnickerson

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

编辑 - 看起来jQuery UI团队已经听到这个投诉，并将在下一个版本的jQuery UI中发布roll out some larger icons。

来源

2011-03-10 16:09:10 JasCav

当然，增加幅度不，我期望什么，但不遗憾的是解决问题。我有一些更老的眼睛，我需要请大图标:) – adamnickerson 2011-03-10 17:30:10

@adamnickerson - ： - \是的，我完全理解。其实，我刚刚发现了一篇博文，我认为*会为你回答你的问题。在上面的答案中看到更新... – JasCav 2011-03-10 17:38:58

感谢您找到这篇文章 - 绝对期待下一个版本。干杯。 – adamnickerson 2011-03-10 19:18:41

请注意，只要创建了使用它的CSS样式，就可以真正使用任何图标，而且它不必位于精灵包中。 jQuery UI Buttons中的“图标名称”实际上只是一个类名。

博客“坐下沃尔多”有很好的例子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用户界面也没发生，即使他们7个月前谈论它。他们确实让他们变得更大一点，但他们没有引入一个全新的尺寸。

来源

2011-09-12 15:07:09 studgeek

这是一个老问题，但这里是我的解决方案（如果你喜欢砍）：

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

对于一个只有图标按钮，它的伟大工程。

来源

2014-05-28 11:48:51 SiliconValley

即使图标看起来不好后执行CSS规则，它无论如何工作。谢谢。 – 2015-01-09 15:56:14

也许和zoom一样：https：//stackoverflow.com/questions/18696085/how-to-use-the-bigger-jquery-icons – 2017-12-09 18:51:51

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

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

它需要只包括jQuery的ui.icons.css和字体目录。

jQuery的图标大小可以改变这样的：

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

来源

2015-07-10 11:50:21 sytolk

在jQuery-UI中调整图标大小

回答

相关问题