Q:

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? 

A:

Inside bootstrap-glyphicons.css replace following strings:

src:url('../fonts/glyphiconshalflings-regular.eot')
to
#{resource['fonts:glyphiconshalflings-regular.eot]}

src:url('../fonts/glyphiconshalflings-regular.eot?#iefix')
to
#{resource['fonts:glyphiconshalflings-regular.eot?#iefix]}

src:url('../fonts/glyphiconshalflings-regular.woff')
to
#{resource['fonts:glyphiconshalflings-regular.woff]}

src:url('../fonts/glyphiconshalflings-regular.ttf')
to
#{resource['fonts:glyphiconshalflings-regular.ttf]}

src:url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular')
to
#{resource['fonts:glyphiconshalflings-regular.svg#glyphicons_halflingsregular]}

A:

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

