How to increase icon size

Vaadin 6 / 7 / 8 Framework UI
1

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. :smiley:

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.

20926.png

2

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

3

The css can be changed to

.icon96px .v-icon{ font-size: 96px; } to only affect the icon

4

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.

5

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.

6

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());
7

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.