Search code examples
jsftwitter-bootstrapprimefacesglyphicons

Glyphicons don't get displayed properly

I am developing an application with jsf, primefaces and bootstrap 3.

The test page from glyphicons is perfectly displayed in my browser, but when I try to use the icons in the web project I only get weird symbols.

My best guess is that the glyphicons css file cannot find the fonts even though I copied them also into the project and let the relative pathes the same:

    -resources
     -css
      -bootstrap.css
      -bootstrap-glyphicons.css
     -fonts
      -glyphicons-halflings.eot
      -glyphicons-halflings.otf
      -glyphicons-halflings.svg
       ...

How can I make sure the css file finds my font directory / fix this error?

Solution

  • Use Resource Handler, which is a standard mechanism for defining and accessing resources. I see that your resources are placed in the right way to do that.

    Try replace the paths on your css for something like this

    #{resource['fonts:glyphicons-halflings.svg']}

    Further information:

    What is the JSF resource library for and how should it be used?

    http://www.packtpub.com/article/jsf-images-css-and-js