Extend jQuery UI Icons with Font-Awesome

font-awesome, jquery-ui

Solution

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

Demo jsfiddle

Problem

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 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" } }); ``` The closest I have come up with is: ``` .ui-icon[class*=" icon-"] { background: none repeat scroll 0 0 transparent; left: 0; margin-left: 1px; text-indent: 0; } ```

Original source