如何使用更大的 jQuery 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18696085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the bigger jQuery icons
提问by nekojsi
This answerexplains 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.
这个答案解释了 jQuery 团队宣布为他们的 UI 组件推出新图标，但我找不到任何使用示例，甚至找不到从哪里下载它们。此外，ThemeRoller 中的所有主题似乎都只提供具有默认大小的图标。
What is the correct usage of those larger icon sets (if they were officially rolled out and can be easily used at all)?
那些较大的图标集的正确用法是什么（如果它们已正式推出并且可以轻松使用）？
回答by Irvin Dominin
I can't find anyway; I think is not still implemented in jQuery UI.
反正我找不到；我认为还没有在 jQuery UI 中实现。
You can move to fontawesome, that support what are you looking for.
您可以移至fontawesome，支持您正在寻找的内容。
If you want to align all the jQuery UI icons with fontawesome look, you can use this css replacement hack:
如果您想将所有 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;
}
this for the replacement, but you can use directly the fontawesome icons like:
这是用于替换的，但您可以直接使用 fontawesome 图标，例如：
<i class="icon-camera-retro"></i> icon-camera-retro
Great related Q/A: Extend jQuery UI Icons with Font-Awesome
很好的相关问答：使用 Font-Awesome 扩展 jQuery UI 图标
Demo: http://jsfiddle.net/IrvinDominin/bEd2R/
演示：http: //jsfiddle.net/IrvinDominin/bEd2R/
UPDATE
更新
Answer updated for FontAwesome 4.0 that changed a bit the css classes because:
为 FontAwesome 4.0 更新的答案稍微改变了 css 类，因为：
Icons have been renamed to improve consistency and predictability.
图标已重命名以提高一致性和可预测性。
Ref: http://fortawesome.github.io/Font-Awesome/whats-new/
参考：http: //fortawesome.github.io/Font-Awesome/whats-new/
Code:
代码：
/* 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;
}
回答by Dustin
While I agree that vector fonts are the way to go, I work in an environment where the group policy settings prevent our users from downloading these awesome fonts.
虽然我同意矢量字体是可行的方法，但我在组策略设置阻止我们的用户下载这些很棒的字体的环境中工作。
If I need an icon larger when using jquery ui, I just implement the zoom property like so:
如果我在使用 jquery ui 时需要一个更大的图标，我只需要像这样实现缩放属性：
.ui-icon {
zoom: 125%;
-moz-transform: scale(1.25);
-webkit-zoom: 1.25;
-ms-zoom: 1.25;
}
Take note that this will pixelate your icons and offset them the more you zoom in. While it's not the prettiest solution, it works when you need a temporary solution while you finish up a sprite map replacement.
请注意，这会使您的图标像素化，并在您放大时偏移它们。虽然它不是最漂亮的解决方案，但当您在完成精灵图替换时需要临时解决方案时，它会起作用。
回答by user3634222
The font scaling isn't working very well for ver FA 4.0 and above.
对于 FA 4.0 及更高版本，字体缩放效果不佳。
width: auto;
height: auto;
to the update will help some but not with fonts fa-2x and larger.
更新将帮助一些但不是字体 fa-2x 和更大。
