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

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

Answer 2

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

Answer 3

Take a look here. Omnifaces has already solved that for us :)

Omnifaces UnmappedResourceHandler

Here we have no need to modify third party resources at all.

Looks then like this:

<h:head>
  <h:outputStylesheet name="glyphicons/web/html_css/css/glyphicons.css"/>
</h:head>

Answer 4

@font-face{
    font-family:'Glyphicons Halflings';

src:url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.eot']}");

src:url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.woff']}") format('woff'),

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg')
}

Answer 5

In Html Page:

  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.eot"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.svg"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.ttf"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.woff"></h:outputStylesheet>
  <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.woff2"></h:outputStylesheet>

In CSS (you can override the @font-face in another .css file and don't touch bootstrap.css):

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.eot']}");
  src: url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
       url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.woff']}") format('woff'), 
       url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), 
       url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.svg']}#glyphicons_halflingsregular") format('svg');
}

General Use:

#{resource['<resource name>']} 

or

#{resource['<library name>:<resource name>']}

Answer 6

For me, the most simple solution was to use bootsfaces and implement at least one element of bootsfaces in the page. Then all references to bootsfaces libs were loaded without any problem. As I had too many layout and javascript problems with primefaces in combination with bootstrap, I replaced all primefaces elements with plain jsf and bootsfaces and some elements from richfaces. Surely this is not a solution for every need, but it saved me a lot of time, as I do not have much knowledge in bootstrap and not much time to spend on css/js/html either.

Needless to say that more and more frameworks work seamless with bootstrap.