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;
}
Related videos on Youtube
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, 2022Comments
-
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 over 10 yearsjQuery 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.
-