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?

Answer 1

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);
}