How to set image in Button?

Flow
1

Hi,

I’m trying to set an image in my Button object using CSS, but can’ t get it to work!

What do I want to achieve? The button should scale with that image!

Below is the Java code snippet for initiating a Button object:

Button btn = new Button();
btn.setStyleName("btnstyle");

The CSS code looks like:

.v-button-btnstyle {
  background: url(myicon.png) 0px 0px;
  margin: 3px;

and is available from the
myTheme.scss
 file.

Below is the location of myTheme within my Vaadin project:

WebContent
  VAADIN
    Themes
      myTheme
        myicon.png
        myTheme.scss

I use the following Java annotation to select my theme:

@Theme("myTheme")

The button that is being displayed doesn’t contain the image
myicon.png
 at all, only the margin seems to work!

Why? By the way I use Vaadin 7.2.0!

Regards,
Gerard

2

background-image: url(myicon.png) 0px 0px;

3

Hi,

Sorry, but this doesn’t work either, but why?

Regards,
Gerard

4

Try to use a more specific rule or !important on background

.v-button.v-button-btnstyle { background: url(myicon.png) 0px 0px; margin: 3px; } or

.v-button-btnstyle {
  background: url(myicon.png) 0px 0px !important;
  margin: 3px;
}
5

Thanks for your suggestion, but without success, sorry!

I give up on this, far to cumbersome, sorry!

Regards,
Gerard

6

I hope you don’t have some problem with the theme. In your file structure, the “theme” folder should be in lower case, not “Theme”. Also, you do not mention styles.scss, which should include the myTheme.scss (note that lower case is recommended for theme names although it might not matter).

You can always use a web inspector, such as Firebug or Firefox’s or Chrome’s built-in inspectors, to see if loading a theme fails or if the rules do not apply correctly.

7

Hi,

You’re right the Theme folder is in fact in lower case, sorry for the typo!

The margin settings in the myTheme.scss work, so I think the file is okay.

My problem is that the myicon.png image is not being displayed!?

Should the myicon.png be located somewhere else perhaps?

Regards,
Gerard

8

It’s OK to have icons in the same folder, although people usually put them in a separate icons folder.

I really recommend using a web inspector to find out why the rules do not match or if there’s some other problem in loading the icon.

Also, if you have compiled the Sass theme to a styles.css, notice to recompile it. (Unless you’re using on-the-fly compilation.)