这个答案解释了jQuery团队宣布为他们的UI组件推出新的图标,但我找不到任何使用示例,甚至找不到从哪里下载它们。此外,ThemeRoller中的所有主题似乎只提供具有默认大小的图标。
这些较大的图标集的正确用法是什么(如果它们已正式推出并且可以轻松使用)?
反正我找不到;我认为还没有在jQuery UI中实现。
您可以移动到 fontawesome
,支持您正在寻找的内容。
如果你想将所有jQuery UI图标与fontawesome外观对齐,你可以使用这个css替换技巧:
/* 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;
}
虽然我同意矢量字体是要走的路,但我在组策略设置阻止我们的用户下载这些很棒的字体的环境中工作。
如果我在使用 jquery ui 时需要一个更大的图标,我只需像这样实现 zoom 属性:
.ui-icon {
zoom: 125%;
-moz-transform: scale(1.25);
-webkit-zoom: 1.25;
-ms-zoom: 1.25;
}
请注意,这将像素化您的图标,并在您放大时偏移它们。 虽然它不是最漂亮的解决方案,但当您在完成精灵地图替换时需要临时解决方案时,它会起作用。
字体缩放对于 FA 4.0 及更高版本效果不佳。
width: auto;
height: auto;
更新将帮助一些,但对字体 FA-2x 和更大没有帮助。
演示:http://jsfiddle.net/LpC4L/