0

I would like to use font awesome within my jsf app, but unfortunately it seems, that some icons are not displayed. Instead of the icon I just could see a square symbol.

My jsf page look like this: 

<div class="centerbox" style="bottom: 5mm; top: 5mm;">
    <i class="fa fa-chain fa-5x"></i>
    <i class="fa fa-wheelchair fa-5x"></i>
    <h:outputLabel value="#{msg.systemNotAvailable}" />
    <a href="tel:xyz" class="mobi-button mobi-button-attention"><h:outputText value="Allocation"/></a>
  </div>

I included the css file as follows:

<h:outputStylesheet name="font-awesome.css" library="css" media="screen"/>

The strangs thing is, that the fa-chain icon is displayed correct, but the wheelchair icon not.

When I look into the html and change the code of the icon, it seems that there are a couple of icons not working.

I tried this with the lated version 4.4.0

Does anybody else face this problem or can give me a hint how to fix?

jjansen
  • 29
  • 6
  • have you tried it with the cdn? https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css – Tienou Aug 28 '15 at 13:06
  • If anything appears to be failing in client side, always look in browser's console for clues. Press F12 in Chrome/Firefox23+/IE9+ and open the *Console* tab. Copypasting the specific error message unmodified into the input field of a sane search engine will often already give the answers back. – BalusC Aug 28 '15 at 13:10
  • This not jsf and jsf-2.2 related at all. JSF is in this regard just an html generator. And you do not even have the icons on a jsf tag. So I bet the results are the same if you remove the `h:outputLabel` and `h:outputText` and load the css directly, nog via an `h:outputStylesheet`. – Kukeltje Aug 28 '15 at 13:11

2 Answers2

0

You can always use the live css from MaxCDN, example: http://jsfiddle.net/web_nfo/zfdgna5w/

https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

( Source: https://fortawesome.github.io/Font-Awesome/get-started/#bootstrapcdn )

Maybe the font files (fontawesome-webfont.eot, fontawesome-webfont.woff2, etc) are not loaded properly. In the css there are some relative paths, if you do not have the fonts on your (local) server it does not work.

Roel
  • 447
  • 4
  • 11
0

first of all thanks for your reply. I think the problem was, that the font files were installed in resource folder in webapp. Since I put it into the WebContent- root all icons could be displayed.

Thank you very much for your support :-)

jjansen
  • 29
  • 6