Icon based user interfaces are very popular, but if you are using the jQuery UI Dialog, you know there isn’t an option to use icons in the dialog’s buttons. Here is a snippet which demonstrates how to replace the text in a dialog’s buttons with Font Awesome’s icons:
jQuery’s .eq() Selector
I am using jQuery’s .eq() selector to select the buttons. The selector selects the buttons from left to right. .eq() is zero based, so the 1st button would 0, the 2nd button would be 1, and the 3rd button would be 2.
// Selects the 1st button.
$(sel).find('.ui-button').eq(0).addClass('fa fa-plus').attr('title', 'fa-plus');
If you needed to select the 5th button, then the script would be this:
// Selects the 5th button.
$(sel).find('.ui-button').eq(4).addClass('fa fa-plus').attr('title', 'fa-plus');
CSS for font-family
The CSS applied to .ui-button is very important because jQuery UI sets the font-family style. If you don’t overwrite the font-family style with “FontAwesome,” then the icons will not display as shown below:
Setting the Title Attribute
Since icons are being used instead of text, we should set the “title” attribute of the button so the user can see what the button does before they click on it. I like using jQuery UI’s tooltip because it is appears much faster than the default title tooltip, and you can also add CSS to it.
I hope this helps!
After I initially commented I appear to have clicked the -Notify me when new comments
are added- checkbox and from now on each time a comment is added I get four emails with the same
comment. There has to be a way you can remove me from that service?
Thanks!
I tried to email you, but your email address bounced back as nonexistent. Could you please contact me at [email protected] and send me the email address that needs to unsubscribed? Thanks.
I think this is one of the most significant info for me. And i am glad reading your article. But want to remark on some general things, The web site style is wonderful, the articles is really excellent : D. Good job, cheers