12

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

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

4

3 回答 3

14

反正我也找不到；我认为仍然没有在 jQuery UI 中实现。

你可以移动到fontawesome，支持你在找什么。

如果您想将所有 jQuery UI 图标与 fontawesome 外观对齐，您可以使用这个 css replacement 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

很好的相关问答：使用 Font-Awesome 扩展 jQuery UI 图标

演示：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;
}
于 2013-09-09T11:23:32.657 回答
10

虽然我同意矢量字体是要走的路，但我在组策略设置阻止我们的用户下载这些很棒的字体的环境中工作。

如果在使用 jquery ui 时需要更大的图标，我只需像这样实现缩放属性：

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

请注意，这会使您的图标像素化并在您放大的越多时偏移它们。虽然这不是最漂亮的解决方案，但当您完成精灵贴图替换时需要临时解决方案时，它可以工作。

于 2014-08-22T20:57:27.913 回答
1

对于 FA 4.0 及更高版本，字体缩放效果不佳。

width: auto;
height: auto;

更新将有所帮助，但对字体 fa-2x 和更大的字体没有帮助。

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

于 2014-06-12T19:44:43.370 回答