jQuery UI Dialog Buttons & Font Awesome

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.

If you needed to select the 5th button, then the script would be this:

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 in

2 Comments

  1. trusted pharmacy canada on November 13, 2018 at 1:39 am

    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!

    • Jacob Hill on November 13, 2018 at 5:13 pm

      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.

Leave a Comment