CODEWITHSUNDEEP
jquery-uifont-awesome
Brombomb
Brombomb

Reputation: 7076

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

Upvotes: 18

Views: 17386

Answers (3)

DotCastle
DotCastle

Reputation: 11

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

Upvotes: 0

CleverPatrick
CleverPatrick

Reputation: 9483

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

Upvotes: 12

Brombomb
Brombomb

Reputation: 7076

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

Upvotes: 22

Related Questions