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.
FontAwesome Icon on Button not shown
Some of the FontAwesome Icons (e.g. MAP or LINE_CHART) are not shown correctly on our buttons:
new Button(FontAwesome.MAP
We are using Vaadin 7.6.6. Any idea how to solve this?
I found this FontAwesome torubleshooting page. Maybe you could check if some of these apply to your situtation?
https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#some-icons-dont-show-up
Hi Johannes,
thanks for the answer and sorry for the late reply.
Johannes Häyry: I found this FontAwesome torubleshooting page. Maybe you could check if some of these apply to your situtation?
https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#some-icons-dont-show-up
I did check the points, here are my comments:
- You don't have an old version of Font Awesome installed on your system (it may have priority) and you didn't restart your machine;
- The version Vaadin uses is 4.4.0. The icon that is not displayed, was introduced in 4.2.0 (https://github.com/FortAwesome/Font-Awesome/issues/171).
- If you are serving Font Awesome from your own server: both font-awesome.css file and /fonts folders are up to date;
- This is something that Vaadin handles. Since other Icons work, I assume this is true. To be safe I tried recompiling the Widgetset, but nothing changed.
- If you are serving Font Awesome from a CDN: Font Awesome's css link is up to date (ref: #1490);
- Same answer as 3. Vaadin handles this. I tried finding the link to the fontawesome files. I found links in the styles.css theme:
- They all work
- You are using valid HTML5 templates (check the W3C Markup Validator);
- I checked it with the W3C Markup Validator. Asides a few warnings that seem harmless, it looks ok.
- You are not using plugins/extensions which are loading older/modified versions of Font Awesome (ref: #1546);
- No we do not use any.
- You are not using any JavaScript or CSS libraries that reset/change/override css properties on the icon tags;
- Nope.
- Your browser's development console shows that you are loading the proper font files;
- Other FontAwesome Icons are there, so this is not the issue.
- Your browser's extensions are not blocking webfonts (noscript, adblockplus, etc.);
- No none.
- Your operating system is not blocking webfonts (Microsoft Group Policy)
- Also no
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url(../valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.eot);
src: url(../valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.eot?#iefix) format("embedded-opentype"), url(../valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.woff) format("woff"), url(../valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.ttf) format("truetype"), url(../valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.svg#FontAwesome) format("svg");
}
I also checked the warnings in the WebDeveloper Console but did not see anything supicous.
Any other Ideas, why this issue occurs?
I found a fix by using the FontAwesomeLabel Add On:
I'm glad that helped. I didn't know about that add-on. I'll check it out.