我想要一种使用Font-Awesome图标来扩展默认的jQuery UI图标的方法。如果可能，保持jQuery图标作为回退，因为Font-Awesome没有完整的覆盖。
jQuery UI示例：
- $("#muteAll").button({
- text: false,icons: {
- primary: "ui-icon-volume-on"
- }
- });
Font-Awesome替换/扩展示例：
- $("#muteAll").button({
- text: false,icons: {
- primary: "icon-volume-up"
- }
- });
我最接近的是：
@H_404_14@
- .ui-icon[class*=" icon-"] {
- background: none repeat scroll 0 0 transparent;
- left: 0;
- margin-left: 1px;
- text-indent: 0;
- }
解决方法
最后的解决方案的股票jQuery与我已经提出的注释：
- /* 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
@H_404_14@ @H_404_14@