Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 4 weeks ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

How to increase icon size

P h
7 years ago Jul 24, 2015 7:28am

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.

 

Johannes Laidler
7 years ago Jul 24, 2015 7:41am

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

+2
Marius Reinwald
7 years ago Jul 24, 2015 7:57am

The css can be changed to

.icon96px .v-icon{
  font-size: 96px;
}

to only affect the icon

+1
P h
7 years ago Jul 24, 2015 8:03am

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. 
 

Agent 100
2 years ago Jan 16, 2020 1:29pm

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.

Nick Rapellas
2 years ago Jan 16, 2020 1:40pm

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());
Agent 100
2 years ago Jan 16, 2020 2:56pm

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.