Extend jQuery UI Icons with Font-Awesome

17,062

Solution 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

Solution 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;
}
Share:
17,062

Related videos on Youtube

Brombomb
Author by

Brombomb

I've been a front end web developer for a while now. I enjoy using PHP, JS, HTML, and CSS to create web apps people use.

Updated on September 15, 2022

Comments

  • Brombomb
    Brombomb about 1 year

    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;
    }
    
    • T.J. Crowder
      T.J. Crowder over 10 years
      jQuery doesn't have any icons. If you mean jQuery UI icons, sure, of course you can replace them. You have all the CSS. Or you could just replace the files without changing the CSS.