Question

I’m trying to create jQuery UI buttons with custom icons, of different sizes from the standard ones, but am having difficulties making these custom icons fit correctly into the buttons. The following code demonstrates how I decorate all <button> elements with a 50×17 px icon, I’ve also created a corresponding fiddle.

Javascript:

$('button').button({icons: {primary: 'login-icon'}, text: false});​

CSS:

.ui-button .ui-icon.login-icon {
    background-image: url(http://i.imgur.com/qLgpl.png);
    width: 50px;
    height: 17px; 
}​

The problem is how to make buttons fit together with such custom size icons, i.e. so that icons are properly placed inside (vertically/horizontally aligned) parent buttons?

Answer 1

I found a solution after having studied the jQuery UI-generated CSS. I found that the trick is that the span containing the icon is positioned inside its parent (the button) using the following CSS rules:

position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -8px;

What the positioning rules (position, left, top) mean is that, sans margins, the icon’s left edge should be at 50% of the parent’s width and the top edge at 50% of the parent’s height, i.e. the top left corner of the icon will be smack in the middle of the button, as illustrated in this pic:

With the help of negative margins, the icon is offset half its length to the left and half its height upward, so that effectively it gets centered in the parent element. The value of 8 pixels is due to jQuery’s icons being 16×16 pixels.

The adjustment I had to make then, was to modify the margins according to the size of my icon (50×17) to 25 and 8 pixels:

position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -8px;

You can see my solution in this updated fiddle.