FontAwesome Icon on Button not shown

Vaadin 6 / 7 / 8
1

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?

27410.png

2

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

3

Hi Johannes,

thanks for the answer and sorry for the late reply.

I did check the points, here are my comments:

  2. 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;
    [list]
  3. 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
    ).


    [/list]
  4. If you are serving Font Awesome from your own server: both font-awesome.css file and /fonts folders are up to date;
    [list]
  5. 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.

    [/list]
  6. If you are serving Font Awesome from a CDN: Font Awesome’s css link is up to date (ref: #1490);
    [list]
  7. Same answer as 3. Vaadin handles this. I tried finding the link to the fontawesome files. I found links in the styles.css theme:
    @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"); }
  8. They all work

    [/list]
  9. You are using valid HTML5 templates (check the W3C Markup Validator);
    [list]
  10. I checked it with the W3C Markup Validator. Asides a few warnings that seem harmless, it looks ok.

    [/list]
  11. You are not using plugins/extensions which are loading older/modified versions of Font Awesome (ref: #1546);
    [list]
  12. No we do not use any.



    [/list]
  13. You are not using any JavaScript or CSS libraries that reset/change/override css properties on the icon tags;
    [list]
  14. Nope.

    [/list]
  15. Your browser’s development console shows that you are loading the proper font files;
    [list]
  16. Other FontAwesome Icons are there, so this is not the issue.

    [/list]
  17. Your browser’s extensions are not blocking webfonts (noscript, adblockplus, etc.);
    [list]
  18. No none.

    [/list]
  19. Your operating system is not blocking webfonts (Microsoft Group Policy)
    [list]
  20. Also no

    [/list]

I also checked the warnings in the WebDeveloper Console but did not see anything supicous.


Any other Ideas, why this issue occurs?

4

I found a fix by using the FontAwesomeLabel Add On:


https://vaadin.com/directory/#!addon/fontawesomelabel

5

I’m glad that helped. I didn’t know about that add-on. I’ll check it out.