Question

Thanks to jQuery UI, I can easily:

• having buttons with text only
• having buttons with text + icons
• having buttons with icon only

The problem is the font was too big so I added this css:

.ui-button .ui-button-text { 
    font-size:60%;
}

But now the problem is I didn’t have any space between my icon and my text.

See here for demo (jsFiddle): http://jsfiddle.net/Rn9tg/71/

Is there any fix?

Thanks.

Answer 1

[UPDATE]: Using left-margin rule does not work with icon only buttons. I replaced left-margin rule by a text-indent rule which seems to resolve the problem.

Add the following CSS rule

.ui-button-text:nth-child(2) {
    text-indent: 5px;
}​

This instruct that any ui-button-text class, which are the second child of a parent should have a left margin of 5px. In this case, the label always is the second child when it is preceded by the icon.

Learn more about nth-child pseudo selector at css-tricks.

[UPDATE]
Internet Explorer -specially older versions- does not support nth-chil pseudo selector correctly. In this case, you should use jquery to force IE to use an additional class.

Add the following class in a IE exclusive CSS file:

.button_left_margin_label {
    text-indent: 5px;
}

With jQuery, force IE to use the above class for labels which fallows an icon:

if IE {$('.ui-button-text:nth-child(2)').addClass('button_left_margin_label');}