jQuery UI Dialog & Font Awesome

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

by Jacob Hill

HTML

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

CSS

.ui-dialog .ui-button {
	padding:10px 15px;
	font-size:30px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	text-align:center;
	float:none;
}

JavaScript

$('#dialog').dialog(
{
	title: 'Dialog Title',
	autoOpen: true,
	buttons:
	{
		// The first button.
		'Button 1': function()
		{
			// Actions.
		},
		// The second button.
		'Button 2': function()
		{
			// Actions.
		}
	},
	// This runs when the dialog is initialized.
	create: function()
	{
		// Selector for the dialog button wrapper.
		var sel = $(this).parent().find('.ui-dialog-buttonpane');

		// Removes the text from the buttons.
		$(sel).find('.ui-button-text').remove();

		// Selects the first button and adds the Font Awesome "plus" icon to the button.
		$(sel).find('.ui-button').eq(0).addClass('fa fa-plus').attr('title', 'fa-plus');

		// Selects the second button and adds the Font Awesome "Trash Can" icon to the button.
		$(sel).find('.ui-button').eq(1).addClass('fa fa-trash').attr('title', 'fa-trash');
	}
});

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