CODEWITHSUNDEEP
javascriptcss
Real Dreams
Real Dreams

Reputation: 18010

Using a font-awesome icon in jquery ui dialog

$('.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?

Upvotes: 2

Views: 5644

Answers (5)

trond
trond

Reputation: 1

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

Upvotes: 0

lolero
lolero

Reputation: 1273

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;
}

Upvotes: 0

Anyone_ph
Anyone_ph

Reputation: 616

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/

Upvotes: 2

Pandy
Pandy

Reputation: 455

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

Upvotes: 0

ericdecoff
ericdecoff

Reputation: 56

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

Upvotes: 3

Related Questions