用超棒的字体扩展jQuery UI图标 [英] Extend jQuery UI Icons with Font-Awesome
本文介绍了用超棒的字体扩展jQuery UI图标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一种使用Font-Awesome图标扩展默认jQuery UI图标的方法.如果可能的话,请保留jQuery图标作为备用,因为Font-Awesome尚没有完整的报道.
I want a way to extend the default jQuery UI icons with Font-Awesome icons. If possible keep the jQuery icons as a fallback, since Font-Awesome doesn't have full coverage.
jQuery UI示例:
jQuery UI Example:
$("#muteAll").button({
text: false,
icons: {
primary: "ui-icon-volume-on"
}
});
超赞字体替换/扩展示例:
Font-Awesome Replacement/Extended Example:
$("#muteAll").button({
text: false,
icons: {
primary: "icon-volume-up"
}
});
我想出的最接近的是:
.ui-icon[class*=" icon-"] {
background: none repeat scroll 0 0 transparent;
left: 0;
margin-left: 1px;
text-indent: 0;
}
推荐答案
带有我提出的注释的股票jQuery的最终解决方案:
Final solution for stock jQuery with annotations that I've come up with:
/* 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;
}
/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
margin-top: -0.75em;
}
.ui-button-icon-only .ui-icon[class*=" icon-"] {
/* Bump it - jQuery UI is -8px */
margin-left: -7px;
}
演示 jsfiddle
这篇关于用超棒的字体扩展jQuery UI图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文