Show jquery-ui icon on the close dialog button

Question

I am customizing the appearance of the jquery-ui dialog widget and so far my css is as follows:

.ui-dialog {
  position: fixed;
  z-index: 1050;
  display: none;
  /*overflow: auto;*/
  /*overflow-y: scroll;*/
  /*-webkit-overflow-scrolling: touch;*/
  outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.ui-dialog .ui-dialog-title {
  margin: 0;
  line-height: 1.42857143;
}
.ui-dialog .ui-dialog-titlebar-close {
  margin-top: -2px;
  border: 1px solid black;
  background-color: transparent;
}
.ui-dialog .ui-dialog-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  outline: none;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
  position: fixed;
  z-index: 1040;
  background-color: #000;
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}

That’s what’s displayed at the moment:

The final step for me to achieve the desired appearance would be to show the . ui-icon-closethick icon inside the close button of the window. Someone knows how to do it?

Answer 1

If Voce is using the same icon distribution as the JQUI template just modify the image url images/ui-icons_888888_256x240.png .

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}

.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_888888_256x240.png);
}

.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}