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!
- Posted by Jacob Hill
- On December 3, 2016
- 0 Comments