Extend jQuery UI Icons with 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 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;
}

回答1:

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

回答2:

Here is @Brombomb's solution but for FontAwesome 4.x icons:

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

回答3:

Please check http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

Based on the latest jQuery Mobile and Font Awesome frameworks, updated when any of these frameworks update
Icons based on SVG vector paths from the original Font Awesome kit
PNG fallbacks for browsers without SVG support
Four versions of the CSS files with two options for each format (SVG & PNG)
You can use inline version or url version of the resources based on your requirements

来源：https://stackoverflow.com/questions/17459115/extend-jquery-ui-icons-with-font-awesome

标签

jquery-ui

font-awesome