Using a font-awesome icon in jquery ui dialog

Question

$('.toggle').click(function () {
    $('.d').dialog();
    $('.ui-dialog-titlebar-close').addClass('icon-remove');
});

Using above code I have to write $('.ui-dialog-titlebar-close').addClass('icon-remove'); for every dialog. I could also use onload event for adding a class to dynamically created elements. But is there any better solution? Any solution that only use css or scss?

Answer 1

var $dialog = $('#dialogScreen').dialog({
        open: function(event, ui) {
            // remove default close icon
            $('.ui-dialog-titlebar-close span').removeClass('ui-icon ui-icon-thickclose');

            // Yuck they have close text let's remove that
            $('.ui-dialog-titlebar-close span').text('');

            // Lets add font awesome close icon
            $('.ui-dialog-titlebar-close span').addClass('fa fa-times');

            // ok lets remove the default underline for a hyperlink
            $('.ui-dialog-titlebar-close').css('text-decoration','none');

            // ok lets make the titlebar bigger so we can increase icon size
            $('.ui-dialog-titlebar').height('2em');

            // ok lets increase .ui-dialog-titlebar-close to handle bigger icon and re-center
            $('.ui-dialog-titlebar-close').height('2em').width('2em').css('top','15px');

            // now lets increase the font-awesome icon and re-center
            $('.ui-dialog-titlebar-close span').addClass('fa-2x').css('padding-left','3px');

            // I also like to load the screen here too
            $('#dialogScreen').load('pages/options.html',function(){
                $(this).trigger('create');
            });
    }
});

This is the code I use to override the icon in the ui-dialog-titlebar-close

Answer 2

Here how to replace the dialog close icon of Jquery UI with font-awesome using css only :

.ui-dialog .ui-dialog-titlebar-close { /* remove default close jUi */
background:none;
border:0;
}
.ui-dialog-titlebar-close { 
position:relative;
float:right;
}
.ui-dialog-titlebar-close:after {
position: absolute;
font-family: FontAwesome;
font-size: 1.0em;
top:0;
right:2px;
content: "\f00d "; 
}

Change content with your desired icon

Update

A better version :

.ui-dialog-titlebar-close { 
position:relative; 
background:0;
border:0;
float:right;
z-index:1;
} 

.ui-dialog-titlebar-close:after {
position:relative;
top:5px;
font-family: FontAwesome;
font-size: 1.0em;
content: "\f28b"; /*Code FA */
z-index:2;
}

You can find Font Awesome "codes" here: https://fortawesome.github.io/Font-Awesome/cheatsheet/

Fiddle: https://jsfiddle.net/x0154xdm/1/

Answer 3

An alternative is utilizing the ui-dialog option for closeText. You can put the FontAwesome <i> tag directly into this option like so:

$( "#dialog" ).dialog({
    closeText:'<i class=\"fa fa-times-circle\"></i>'
});

But if you don't want to have to re-set this option every time you're creating a dialog, consider overriding the default jQuery UI options.

$.extend($.ui.dialog.prototype.options, {
    closeText:'<i class=\"fa fa-times-circle\"></i>',
});

One other thing to consider is that you'll need to do some CSS styling to hide various default button elements if you're using the default theme.

---

I've compiled these all into a sample codpen: http://codepen.io/anon/pen/aNWrYN

Answer 4

After hours of trying to get this to work, this is what finally worked for me in replacing the closing button icon for a Font Awesome character:

$("#dialog").dialog();
$("#dialog").closest(".ui-dialog")
            .find(".ui-dialog-titlebar-close")
            .empty()
            .append("<span class='fa fa-times'></span>");

The key to my success was to include a css rule to remove the text-indent inside the button:

.ui-dialog-titlebar-close {
  text-indent: 0;
}

Answer 5

With fontawesome 5, this can be achieved by:

.ui-icon-closethick {
  text-indent: 0;
}

.ui-icon-closethick::after {
  text-indent: 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f00d";
}

See: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements