jQuery UI Dialog & Font Awesome

Demonstrates how to use Font Awesome icons with the jQuery UI Dialog.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<div id="dialog">
    <p>
        Dialog text...
    </p>
</div>

CSS

.ui-dialog .ui-button {
    font-family:FontAwesome;
	padding:10px 15px;
	font-size:30px;
  text-indent: 0; 
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  text-align:center;
  float:none;
  text-indent: 0; 
} 

.ui-dialog .ui-button-text {
  display: none;
}

JavaScript

$('#dialog').dialog(
{
	title: 'Dialog Title',
	autoOpen: true,
	buttons:
	[
		// The first button.
		{
    	class: "fa fa-trash",
      showLabel: false,
    	click: function() {}
    }
	],
	// This runs when the dialog is initialized.
	create: function()
	{
		// Selector for the dialog button wrapper.

		// Selects the first button and adds the Font Awesome "plus" icon to the button.
	}
});

// Adds jQuery UI's tooltip.
$('button').tooltip();