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 increase icon size
Hi everybody,
i´m trying to increase the size of a label icon in css. but i´m not so familiar with the syntax.
I hope that somebody can help me here. :D
Here is my code:
Label lbl_trashCaption = new Label("BlaBlaBlaLabel");
lbl_trashCaption.addStyleName("icon96px");
...
lbl_trashCaption.setIcon(FontAwesome.TRASH_O);
When using Firebug, i found out, that if i change the font-size value the icon is getting bigger.
but i don´t know how to access this value in my scss file.
In the attachement if added a firebug-screenshot and the tagged value which must be changed to a higher pixel value.
Hi,
try something like this:
JAVA
Label icon = new Label(FontAwesome.TRASH_O.getHtml(), ContentMode.HTML);
icon.addStyleName("icon96px");
CSS
.icon96px{
font-size: 96px;
}
you can also use the build in Valo variables:
Label icon = new Label(FontAwesome.TRASH_O.getHtml(), ContentMode.HTML);
icon.addStyleName(ValoTheme.LABEL_LARGE);
best regards
Johannes
The css can be changed to
.icon96px .v-icon{
font-size: 96px;
}
to only affect the icon
JohannesL: Hi,
try something like this:
JAVA
Label icon = new Label(FontAwesome.TRASH_O.getHtml(), ContentMode.HTML); icon.addStyleName("icon96px");
CSS
.icon96px{ font-size: 96px; }
you can also use the build in Valo variables:
Label icon = new Label(FontAwesome.TRASH_O.getHtml(), ContentMode.HTML); icon.addStyleName(ValoTheme.LABEL_LARGE);
best regards
Johannes
thanks for your reply.
The Valeo solution is pretty nice but the icon is still to small. also if i use "LABEL_HUGE" instead.
the css-solution works perfekt.
I borrow this thread!
I'm using the CSS-method on a Vaadin Icon, but nothing happens. I'm using Vaadin 14. Yes, the CSS class name is correct. I can set the color of the icon by the way. But not the size.
Try something like that and see if it works for you:
public static Icon createLargeIcon(VaadinIcon icon) {
Icon i = new Icon(icon);
i.addClassName("size-l"); //Available variables: size-s/size-m/size-l
return i;
}
Icon blablahIcon = createLargeIcon(VaadinIcon.ABACUS.create());
Nick R.: Try something like that and see if it works for you:
public static Icon createLargeIcon(VaadinIcon icon) { Icon i = new Icon(icon); i.addClassName("size-l"); //Available variables: size-s/size-m/size-l return i; } Icon blablahIcon = createLargeIcon(VaadinIcon.ABACUS.create());
But I need to make sure it's for mobile as well. CSS works perfect for me.