Question

This answer解释说jQuery团队宣布为他们的UI组件推出新的图标，但我找不到任何使用示例，甚至从哪里下载它们。此外，ThemeRoller中的所有主题似乎只提供默认大小的图标。

这些较大的图标集的正确用法是什么（如果它们正式推出并且可以轻松使用）？

Answer 1

无论如何我找不到;我认为还没有在jQuery UI中实现。

您可以移至fontawesome，支持您所寻找的内容。

如果你想将所有jQuery UI图标与fontawesome外观对齐，你可以使用这个css替换hack：

 /* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" icon-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0;
    /* Bump it up - jQuery UI is -8px */
    margin-top: -0.5em;
}

.ui-button-icon-only .ui-icon[class*=" icon-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

这是替换，但您可以直接使用fontawesome图标，如：

<i class="icon-camera-retro"></i> icon-camera-retro

伟大的相关问答：Extend jQuery UI Icons with Font-Awesome

演示：http://jsfiddle.net/IrvinDominin/bEd2R/

更新

为FontAwesome 4.0更新的答案改变了一些css类，因为：

图标已重命名，以提高一致性和可预测性。

参考：http://fortawesome.github.io/Font-Awesome/whats-new/

代码：

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" fa-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0; 
    /* Bump it up - jQuery UI is -8px */
    margin-top: -0.5em;
}

.ui-button-icon-only .ui-icon[class*=" fa-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

Answer 2

虽然我同意矢量字体是可行的方法，但我在组策略设置阻止我们的用户下载这些令人敬畏的字体的环境中工作。

如果我在使用jquery ui时需要一个更大的图标，我就像这样实现zoom属性：

.ui-icon { 
    zoom: 125%; 
    -moz-transform: scale(1.25); 
    -webkit-zoom: 1.25; 
    -ms-zoom: 1.25;
}

请注意，这会使您的图标像素化，并且放大的距离越远。虽然它不是最漂亮的解决方案，但在您完成精灵地图替换时需要临时解决方案时，它会起作用。

Answer 3

对于版本4.0及更高版本，字体缩放不能很好地工作。

width: auto;
height: auto;

更新将有助于一些但不包括字体fa-2x和更大。

演示：http://jsfiddle.net/LpC4L/

如何使用更大的jQuery图标

3 个答案:

更新