Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to set image in Button?
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
Hi,
Sorry, but this doesn't work either, but why?
Regards,
Gerard
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;
}
Thanks for your suggestion, but without success, sorry!
I give up on this, far to cumbersome, sorry!
Regards,
Gerard
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.
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
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.)