Glyphicons don't get displayed properly

Question

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?

Answer 1

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]}