How do I make the JQuery UI dialog "close" button look like an 'X' icon?

Question

The "close" button is appearing as the text "close," with no styling to make it look like what a user would expect to see for closing a dialog.

Isn't a graphical 'X' icon the default close button?

How do I style it to look right?

Here's my dialog initialization (if I leave out the "closeText" option then it defaults to "close" in the upper-left-hand corner of the dialog box):

$("#signInDialog").dialog({ dialogClass: "login",
                            zIndex: 20,
                            modal: true,
                            closeText: 'X'
}); 

Solution

There is a default close icon in jQuery UI framework:

.ui-icon-close{background-position:-80px -128px}

or

.ui-icon-circle-close{background-position:-32px -192px}

Just take a look into generated CSS and make sure you downloaded the framework correctly (with all images).