How to use Font icons in scss

Flow
1

Hi, I want to use new font icons in scss like below

.split .v-button-wrap:before
{
content: “\e683”;
}

I installed addon but failed to get proper icon as per shown in
This link
. It displays some chineese icons. What should I do?

Thanks in advance.

2

Hi Kshitij,

you don’t need to use scss to add the Icons to your button.

As described in your link (Vaadin Icons Add-on > step 4) you can do the following:

button.setIcon(VaadinIcons.VAADIN_V)

just follow the steps in your Link. (
https://vaadin.com/font-icons/download
 )

best regards

Johannes

3

Thank You JohannesL,
But what if i want to make my application responsive? I wanna show caption as well as Icon when application opened on laptop or desktop device with small icons… but when same app is opened in Tablet it will show big icon without caption. Is that possible?

Thanking you in advance

4

if I use following code

split = new Button("Departments"); split.setIcon(VaadinIcons.AIRPLANE); split.setStyleName(ValoTheme.BUTTON_BORDERLESS); see what i get from this (Please find attachment)
it must display Airplane ICON i guess…

22111.png

5

Yes you can make your application responsive.

There is an scss approach and a plain Java approach.

SCSS:
https://vaadin.com/book/-/page/themes.responsive.html

Plain Java:
https://vaadin.com/blog/-/blogs/rwd-pj-responsive-web-design-in-plain-java

Project example:
https://github.com/vaadin/dashboard-demo


“if I use following code
split = new Button(“Departments”);
split.setIcon(VaadinIcons.AIRPLANE);
split.setStyleName(ValoTheme.BUTTON_BORDERLESS);
see what i get from this (Please find attachment)”

I don’t know what result you expect but be careful with using “component.setStyleName(…)”, because it overrides your other styles set on your component as described in the javadoc (
​"Sets one or more user-defined style names of the component, replacing any previous user-defined styles."
 ) .

regards

Johannes

EDIT: also check the valo demo for examples

https://demo.vaadin.com/valo-theme/


https://github.com/vaadin/valo-demo

6

I was expecting
This ICON. I
t shows me bold arrow instead. And I am not fully satisfied with your solution.
BTW thank you for other Important links.

7

Is there a specific reason why you don’t want to use the build in icons (FontAwesome). You only need to import different font icons when you are not satisfied with the default ones.

see also for icon styling/usage:

https://vaadin.com/book/-/page/themes.fonticon.html

for example:

component.setIcon(FontAwesome.PLANE);
8

Yeah. I did it using FontAwesome but I wanted to do it using SCSS as explained by Jouni Koivuviita in Responsive Layout webinar

9

I don’t know what your current problem is. You can get all information you need for creating a responsive layout with the links i provided.

Since it seems that you don’t even glance through the links i posted, i wrote a quick example for creating a responsive Icon.

Java code:

 Label responsiveIcon = new Label(FontAwesome.PLANE.getHtml(), ContentMode.HTML);
 responsiveIcon.addStyleName("responsive");

 Responsive.makeResponsive(responsiveIcon);

 setContent(responsiveIcon);

scss:

[code]

/* Basic settings for all sizes */
.responsive {
padding: 5px;
line-height: 36pt;
}

/* Small size */
.responsive[width-range~=“0-300px”]
{
color: blue;
font-size: 16px;
}

/* Medium size */
.responsive[width-range~=“301px-600px”]
{
color: pink;
font-size: 24px;
}

/* Anything bigger */
.responsive[width-range~=“601px-”]
{
color: green;
font-size: 36px;
}
[/code]Please check the vaadin wiki / project links and search the forums for more info about responsive layouts/icons/components or post a more detailed question. :slight_smile:

best regards

Johannes

10

This is better example. Thank you very much…


“Since it seems that you don’t even glance through the links i posted, i wrote a quick example for creating a responsive Icon.”

I already went through the links you posted earlier but I couldent construct the proper solution. I actually wanted to set icons to button using Hex codes as jouni did in his workshop. (Please find attachment below… see the scss theme in eclipse… “\e004” etc are used to generate icons )

Thank You and Sorry for so much trouble :slight_smile:
22112.png

11

Hey Kshitij,

You were most likely missing “font-family”. You can do the following:

Java

Button btn1 = new Button("Testing");
btn1.addStyleName("test");

Button btn2 = new Button("Testing");
btn2.setIcon(FontAwesome.ADJUST);

SCSS

.test .v-button-wrap:before {
  content: "\f042";
  font-family: FontAwesome;
}
12

Added attachment. Btn1 at top, btn2 at the bottom.
22660.png

13

Hello All,

I want to add font awesome icon for one button.
and I have tried both the options:

  1. pdf.setIcon(FontAwesome.DOWNLOAD);

  2. pdf.addStyleName(“icon”);
    .icon .v-button-wrap:before {
    content: “\f019”;
    font-family: FontAwesome;

}
But both of them are not working.
Please help me . I really need to find out the solution.

Thanks
Anjali Jain

14

Hello All,
now its working. Actually i have added icon in design also. Thats why it was not working . I have removed the icon from design and apply the above mentioned solution and its working. Sorry for the above post.
Thanks
Anjali Jain