如何使用更大的jQuery图标

Question

这个答案解释了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

很棒的相关Q/A:使用Font-Awesome扩展jQuery UI图标

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

UPDATE

为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;
}

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