CODEWITHSUNDEEP
javascripthtmlcssjquery-ui
aknuds1
aknuds1

Reputation: 67987

How do I fit custom size icons into jQuery UI buttons?

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 50x17 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?

Upvotes: 1

Views: 3122

Answers (2)

SumGuy
SumGuy

Reputation: 622

In upcoming versions of css you can just scale it using transform:scale(2,2); JSFiddled

Upvotes: 1

aknuds1
aknuds1

Reputation: 67987

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:

Centered icon

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 16x16 pixels.

The adjustment I had to make then, was to modify the margins according to the size of my icon (50x17) 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.

Upvotes: 2

Related Questions