上一篇: jquery点击锚元素力滚动到顶部？下一篇:jquery – 在javascript中获取当...

jquery-ui – 使用Font-Awesome扩展jQuery UI图标

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery-ui – 使用Font-Awesome扩展jQuery UI图标，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想要一种使用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" 
    }
});

我最接近的是：

.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