Jquery ui 使用字体扩展jQuery UI图标

我想要一种用字体图标扩展默认jQuery UI图标的方法。如果可能的话，保留jQuery图标作为备用，因为FontAwesome并没有完全覆盖

jQuery UI示例：

$("#muteAll").button({
    text: false, 
    icons: { 
        primary: "ui-icon-volume-on" 
    }
});

字体替换/扩展示例：

$("#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;
}

演示

这里是@Brombomb的，但对于FontAwesome 4.x图标：

/* 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;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

.ui-button-icon-only .ui-icon[class*=" fa-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

请查收

• 基于最新的jQuery Mobile和Font Awesome框架，在这些框架更新时更新
• 基于原始字体工具包中SVG矢量路径的图标
• 不支持SVG的浏览器的PNG回退
• CSS文件的四个版本，每种格式有两个选项（SVG和PNG）
• 您可以根据需要使用资源的内联版本或url版本

---

jQuery没有任何图标。如果您指的是jQueryUI图标，当然可以替换它们。你有所有的CSS。或者你可以在不改变CSS的情况下替换文件。你是对的。我将更新我的问题。区别在于他们的前缀已更改。链接有问题，请检查一下好吗？