Using Font-Awesome with jQuery UI
So you're using both jQuery UI and Font-Awesome in your application and you'd like to use one set of icons. Well here's how you can replace the jQuery UI Icons with, in my opinion the better looking, Font-Awesome Icons.
/* 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;
}
Written by Rob W
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Jquery ui
Authors
brombomb
10.49K
adziendziel
1.083K
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#