Touchkit Can't change size of icon

Flow
1

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

2

Any responses, it is getting to be a crtical issue, for my student project

3

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

4

Doesn’t seem to work with touchkit navifation button.
Does work with regular button

5

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.