CODEWITHSUNDEEP
jsftwitter-bootstrapprimefacesglyphicons
xgb84j
xgb84j

Reputation: 561

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?

Upvotes: 4

Views: 6896

Answers (6)

glocknergrat
glocknergrat

Reputation: 1

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.

Upvotes: 0

Thomas Herzog
Thomas Herzog

Reputation: 506

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>

Upvotes: 1

ndaniel8a
ndaniel8a

Reputation: 96

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

Upvotes: 0

manuel Esteban
manuel Esteban

Reputation: 1

@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')
}

Upvotes: 0

n1k1ch
n1k1ch

Reputation: 2702

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

Upvotes: 5

Diogo Moreira
Diogo Moreira

Reputation: 1082

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

Upvotes: 3

Related Questions