There are 2 X icons competing with one another.
<button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button>
Has the following X image:
.btn-close, .ui-dialog .ui-dialog-titlebar-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.25em 0.25em;
color: #000;
background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
border: 0;
border-radius: 0.25rem;
opacity: 0.5;
}
But <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
Has the following X images provided by jquery ui base theme:
.ui-button .ui-icon {
background-image: url(images/ui-icons_777777_256x240.png)/*{iconsDefault};; */;
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_444444_256x240.png)/*{iconsHeader}*/;
}
.ui-icon, .ui-widget-content .ui-icon {
background-image: url(images/ui-icons_444444_256x240.png)/*{iconsContent}*/;
}It seems we should prefer the first one supplied by _close.scss in bootsrap5
Postponed: needs info
3.0
Code
@tonytheferg
Provided reference code is jQuery UI popup so the issue is related to jQuery ui module.
please provide screenshots of the issue if issue still persist without jquery UI library/module