Valo theme not displaying icons for widgets

Flow
1

Greetings,

Today I upgraded to Vaadin 7.7.7. I compiled the widgetset and created a valo based css. All widgets show up. However, no icons are showing.

Eg: The tree nodes show some weird \foda square image instead of expand/collapse arrows. The richtext also shows just small square boxes like \f12c. When I inspect DOM and check the css this is how it looks like:

.engage .v-richtextarea .gwt-RichTextToolbar-top div[title=“Toggle Subscript”]
::before {
content: “\f12c”;
}
.engage .v-richtextarea .gwt-RichTextToolbar-top div::before {
font-family: ThemeIcons;
}

Is 7.7.7 buggy or am I doing something wrong?

Thanks,
Imran

2

Here are screenshots of tree and richtext
31018.png
31019.png

3

I would first recommend you to change font family to use Font Awesome if you want to select from wider selection of icons. The ThemeIcons font is reduced set since Vaadin 7.6., see

https://github.com/vaadin/framework/issues/6970

4

Thanks for the quick response.
How do I do that? My styles.scss looks like this:

$v-font-size: 14px;
$v-unit-size: 28px;
@import “…/valo/valo”;
.engage{
@include valo;
.v-app, .v-app-loading{
background-color:inherit;
}
}

5

Far from an expert here, but having read the Vaadin 8 release notes including this comment…

FontAwesome icon constants have been deprecated, and will not be updated. It is replaced with Vaadin Icons that are included in the Framework

… I replaced all the FontAwesome icons in my application with Vaadin Icons.

I’m not sure of the effect of “depricating the icon constants” but it looks like Vaadin Icons is the path foward, so I followed it.

6

Thanks. Not sure how I can act on your information. Can you provide specific steps or point me to the doc on how you followed the Vaadin icons path? Does it involve moving to 8?

I have a problem and it appears that 7.7.7 is broken as it is not working out of the box.There does not appear to be any help or document on how to use something that was changed and apparently broken since 7.6. I just wanted to ensure it wasnt something wrong at my end before I roll back to previous version.

7

Any help from Vaadin people? Isnt this like a serious bug in the platform?

8

Have you tried change this

.engage .v-richtextarea .gwt-RichTextToolbar-top div::before {
font-family: ThemeIcons;
}

to this

.engage .v-richtextarea .gwt-RichTextToolbar-top div::before {
font-family: FontAwesome;
}

9

@tatu Yes i have tried that. It did not work. I even tried replacing all occurences of ThemeIcons as other widgets like tree have the same issue and no difference.

I also tried with Vaadin versions, 7.7.3 & 7.6.4 and all versions have the same issue. The libs included in the webapps are

  • flute, jsoup, jackson-anno, jackson-core, jacksone-databind, vaadin-themes, vaadin-server, vaadin-shared.

Its running on Tomcat 8 using JDK 8. Am I missing any libraries?

10

I had this same problem and found that I had a mismatched version of Vaadin and the Vaadin themes. My application used 7.6.8 and Vaadin themes was at 8.0.2. Once I had both at version 7.7.8 the problem was solved.