jQuery ui button image not displaying

Question

I´ve tried to use a jQuery Ui button with an image. So i wrote the following code:

$("#analyse_button").button({ icons: { primary: "fb-icon" } });

.fb-icon {
    background-image: url(./fb-icon.png);
}

As you see in the screenshot below the background-image is overriden by the standard ui-icon background-image but even if i remove this my image is still not being displayed.

See Image here

Am i doing anything wrong?

dfsq · Accepted Answer · 2013-03-08 08:38:04Z

0

In order to increase the priority of your CSS rule it should be defined this way:

.ui-state-default .fb-icon {
    background-image: url(./fb-icon.png);
}

answered Mar 8, 2013 at 8:38

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2127042 Over a year ago

so that worked now its no longer overriden but its still not displaying.. any others ideas?

dfsq Over a year ago

Try to adjust the position of the image with background-position.

user2127042 Over a year ago

that worked too (; now one last question: how to i resize the icon?

dfsq Over a year ago

You can use background-size property, but it's not supported in IE<9, so better to use already sized icon.

Collectives™ on Stack Overflow

jQuery ui button image not displaying

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related