Question

The buttons I’m creating for a UI consist of an icon plus some text, thus:

  [ <icon> Some Text ]

I’m using jQuery to create the button, with HTML like this:

<button class="myButton" type="button"/>

and JavaScript like this:

$('.myButton').button({
                    label: "Some Text",
                    icons: {
                        primary: "icon-custom",
                    }
                })
                .css({ width: '85px' });

The design team have specified requirements for how it should look, so I need an to have an 85px wide button (I’ve managed that bit) with a 5 pixel gap between the icon and text, then center the icon+text pair within the button.

Is this possible, and if so, how? I’ve not been able to figure it out.

It seems that the default is to left-align the icon on the button, then center the text in what’s left, but this doesn’t look very good.

Answer 1

Not very elegant, but should take care of your requirements.

$('.myButton').button({
    label: '<span class="ui-button-icon-primary ui-icon icon-custom"></span>text',
}).css({
    width: 85
}).find('.ui-icon').css({
    display:'inline-block',
    position:'relative',
    top:4, //top varies depending on button height / font-size, adapt as needed
    marginRight:5
});

Fiddle

This way, the icon is part of the centered text span. You just have to compensate the vertical align.