Ui-modal-dialog ui-icon-close color change

Question

I am fixing the color of ui-icon-close, which is a close icon "X". Currently, I have mostly seen the following page How To Specify (Override) JQuery Icon Color for helping me to change the color of".ui-close-icon" which is "X"'s icon color. But it does not work so far. How can I fix?

My JS fiddle.

https://jsfiddle.net/kimihiro/hqxmmj8q/show/

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  _title: function(title) {
    if (!this.options.title) {
      title.html(" ");
    } else {
      title.html(this.options.title);
    }
  }
}));
$("#dialog").dialog({
  autoOpen: false,
  　　height: 300,
  width: 830,
  dialogClass: 'myTitleClass',
  modal: true,

  title: "Carpe Diem. Nunca Acredito Posteiro",
  closeOnEscape: false,
  open: function(event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui);
  },
  buttons: {
    "Save": function() {
      $(this).trigger(updateKeyword());
    }
  }
})

$("#opener").click(function() {
  $("#dialog").dialog("open");
});

input#opener {
   height: 30px;
   width: 200px;
   left: 50%;
   margin-top: -15px;
   /* = -height / 2   */
   margin-left: -100px;
   /* = -width / 2    */
   position: fixed;
   top: 80%;
   background: rgba(4, 115, 184, 0.9);
   color: #fff;
   font-style: Arial;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.5;
   border-style: outset;
   display: flex;
   transition: .5s ease;
   vertical-align: middle;
   justify-content: center;
 }
 
 .myTitleClass .ui-dialog-title {
   white-space: normal;
 }
 
 .myTitleClass .ui-dialog-titlebar {
   background: rgba(4, 115, 184, 0.9);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   height: 60px;
 }
 
 .myTitleClass .ui-widget-content .ui-state-default {
   background-image: none;
   background-color: rgba(4, 115, 184, 0.6);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   border-style: none;
 }
 
 .myTitleClass .ui-widget-content .ui-state-hover {
   background-image: none;
   background-color: rgb(4, 127, 184);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   border-style: none;
 }
 
 .ui-widget-overlay {
   position: fixed;
   background: black;
 }
 
 .myTitleClass .ui-dialog-titlebar-close {
   background: rgba(4, 115, 184, 0.9);
   border-radius: 17px;
   height: 33px;
   margin: -10px 0 0;
   padding: 1px;
   position: absolute;
   right: -28px;
   top: -24%;
   width: 33px;
 }
 
 .myTitleClass.ui-icon-close {
   background-image: url("images/ui-icons_ffffff_256x240.png");
 }
 
 .ui-dialog {
   overflow: visible;
 }
}

<script type="text/javascript" src="jsapi/utils.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<input type="button" id="opener" value="Register Keyword">
</button>
<div id="dialog">Merry Christmas.
</div>

Answer 1

You can overwrite the icons with the following CSS:

.ui-state-default .ui-icon {
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}

You can download the icon png file in any color you like. Just change the color part in the following url:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

COLOR - Change color code like ff0000,ffffff

(but don't use the URL as a CDN, be nice and save the files locally)

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  _title: function(title) {
    if (!this.options.title) {
      title.html(" ");
    } else {
      title.html(this.options.title);
    }
  }
}));
$("#dialog").dialog({
  autoOpen: false,
  　　height: 300,
  width: 830,
  dialogClass: 'myTitleClass',
  modal: true,

  title: "Carpe Diem. Nunca Acredito Posteiro",
  closeOnEscape: false,
  open: function(event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui);
  },
  buttons: {
    "Save": function() {
      $(this).trigger(updateKeyword());
    }
  }
})

$("#opener").click(function() {
  $("#dialog").dialog("open");
});

.ui-state-default .ui-icon {
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}

input#opener {
   height: 30px;
   width: 200px;
   left: 50%;
   margin-top: -15px;
   /* = -height / 2   */
   margin-left: -100px;
   /* = -width / 2    */
   position: fixed;
   top: 80%;
   background: rgba(4, 115, 184, 0.9);
   color: #fff;
   font-style: Arial;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.5;
   border-style: outset;
   display: flex;
   transition: .5s ease;
   vertical-align: middle;
   justify-content: center;
 }
 
 .myTitleClass .ui-dialog-title {
   white-space: normal;
 }
 
 .myTitleClass .ui-dialog-titlebar {
   background: rgba(4, 115, 184, 0.9);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   height: 60px;
 }
 
 .myTitleClass .ui-widget-content .ui-state-default {
   background-image: none;
   background-color: rgba(4, 115, 184, 0.6);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   border-style: none;
 }
 
 .myTitleClass .ui-widget-content .ui-state-hover {
   background-image: none;
   background-color: rgb(4, 127, 184);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   border-style: none;
 }
 
 .ui-widget-overlay {
   position: fixed;
   background: black;
 }
 
 .myTitleClass .ui-dialog-titlebar-close {
   background: rgba(4, 115, 184, 0.9);
   border-radius: 17px;
   height: 33px;
   margin: -10px 0 0;
   padding: 1px;
   position: absolute;
   right: -28px;
   top: -24%;
   width: 33px;
 }
 
 .myTitleClass.ui-icon-close {
   background-image: url("images/ui-icons_ffffff_256x240.png");
 }
 
 .ui-dialog {
   overflow: visible;
 }
}

<script type="text/javascript" src="jsapi/utils.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<input type="button" id="opener" value="Register Keyword">
</button>
<div id="dialog">Merry Christmas.
</div>