Javascript 在jQueryUI对话框中使用字体图标

使用上述代码，我必须编写

$（'.ui对话框标题栏关闭'）.addClass（'icon-remove'）
对于每个对话框。我还可以使用onload事件将类添加到动态创建的元素中。但是有更好的解决办法吗？任何只使用css或SCS的解决方案

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

这是我用来覆盖ui对话框标题栏关闭中的图标的代码。这里，如何仅使用css将Jquery ui的对话框关闭图标替换为字体：

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

使用所需图标更改内容

更新
更好的版本：

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

您可以在此处找到字体很棒的“代码”：

小提琴：
另一种选择是利用用户界面对话框选项进行。您可以将
标记直接放入此选项，如下所示：

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

$（“#dialog”）.dialog({
关闭文本：“”
});

但如果您不想每次创建对话框时重新设置这个选项，请考虑./P>
$.extend（$.ui.dialog.prototype.options{
closeText:“”，
});

另一个要考虑的是，如果使用默认主题，您需要做一些CSS样式来隐藏各种默认按钮元素。


我已经将这些都编译成了一个示例代码笔：
经过数小时的努力，我终于成功地将关闭按钮图标替换为一个字体很棒的字符：

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

使用Font5，这可以通过以下方式实现：

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

见：
您是否尝试过为.ui对话框标题栏关闭的引导图标重新创建CSS？这看起来像一个奇怪的黑客，但它应该工作我使用这种方法，但不是使用CSS的内容。我使用closeText选项创建了下面的对话框，并将记录的备忘单中的图标复制/粘贴到我的Javascript中；然后它只需要一些最小的CSS。
$("#dialog").dialog();
$("#dialog").closest(".ui-dialog")
            .find(".ui-dialog-titlebar-close")
            .empty()
            .append("<span class='fa fa-times'></span>");

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

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

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