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.
Touchkit Can't change size of icon
I increase the size of the navigation button to a height of 75px (or percentage)
I can't get the navigation button icon to make a similar stretch!!!
How do I control the percentage between iMage and text?
How do I get the text to wrap?
If I try to put an Image and navigation button on the same row in a horizontal button group they don't fallout on the same line!! (even if navigationbutton is 50% and Image is 30% width
Thanks
Any responses, it is getting to be a crtical issue, for my student project
Hi Alan,
one possible way to do this is using an image as your icon.
http://stackoverflow.com/questions/10724128/icons-resize-or-shrink
This way you can change the size of the image (using your favoured image manipulation program) and have the size of the icon change accordingly. As an example: I created an image 'deer.png' with height and width set to 75px. In my project called 'myproject' I store the image in the folder '/WebContent/VAADIN/themes/myproject/images'. Now I can use the image as an icon for my button 'button' using the code
button.setIcon(new ThemeResource("images/deer.png"));
Best regards,
Henrik
Doesn't seem to work with touchkit navifation button.
Does work with regular button
OK,
I tried the following method on a NavigationButton and it worked for me. I use css styling and an icon from the FontAwesome collection (in this case HOSPITAL_O).
In the code I have the following code snippet:
NavigationButton navigationButton = new NavigationButton();
navigationButton.setIcon(FontAwesome.HOSPITAL_O);
navigationButton.addStyleName("myStyle");
In my style file (myproject.scss) I add the following code:
.myStyle {
.v-icon.FontAwesome {
font-size: 60px;
}
}
You will probably have to do some tweaking to get the text alligned correctly alongside your icon but hopefully this will work for you as well.