如何使用更大的jQuery图标 [英] How to use the bigger jQuery icons

问题描述

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

This answer explains that the jQuery team announced to roll out new icons for their UI components, but I can not find any examples of usage or even where to download them from. Additionally, all the themes in the ThemeRoller seem to offer only icons with the default size.

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

What is the correct usage of those larger icon sets (if they were officially rolled out and can be easily used at all)?

推荐答案

我认为还没有在jQuery UI中实现。

I can't find anyway; I think is not still implemented in jQuery UI.

您可以移至 fontawesome

You can move to fontawesome, that support what are you looking for.

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

If you want to align all the jQuery UI icons with fontawesome look, you can use this 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图标，如： / p>

this for the replacement, but you can use directly the fontawesome icons like:

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

伟大的相关Q / A：使用Font-Awesome扩展jQuery UI图标

Great related Q/A: Extend jQuery UI Icons with Font-Awesome

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

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

Answer updated for FontAwesome 4.0 that changed a bit the css classes because:

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

Icons have been renamed to improve consistency and predictability.

参考： 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;
}

这篇关于如何使用更大的jQuery图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！