Adding Bootstrap Glyphicon to jQuery UI Dialog Buttons

Question

I have looked long and hard, but cant seem to find any good documentation on how to do this.

I can add classes like this:

$('#element').dialog({
  buttons:{
    "yes":{
      text:'Yes',
      class:'test'
    },
    "no":{
      text:'No',
    }
});

This does not allow me to add a span tag.

I tried:

.test:before {
    content:"\e105";
}

But that just adds a little block on top of the text:

I've also tried injecting the span, which I really don't want to land up doing because it feels very 'hacky'.

$('.ui-dialog-buttonpane')
.find('button:contains("Yes")')
.removeClass('ui-button-text-only')
.prepend('<span class="glyphicon glyphicon-export"></span>')   

This gives me:

Is there any better way of doing this?

Answer 1

The villain seems to be:

.ui-icon {
  display: block;
  text-indent: -99999px; /* THIS GUY HERE! */
  overflow: hidden;
  background-repeat: no-repeat;
}

But you don't want to get rid of him completely, since it might affect the icons present in jQuery UI widgets.

So you can overwrite it just for the elements to which we apply glyphicon class like:

.ui-icon.glyphicon {
  text-indent: initial;
}

Now, to apply these glyphicon classes, use the icons option of jQuery button widget like:

$(function () {
  $("#dialog").dialog({
     buttons: [{
        text: "Ok",
        icons: {
            primary: "glyphicon glyphicon-export"
        },
        click: function () {
            $(this).dialog("close");
        }
    }]
  });
});

This gives me: