All geek questions in one place

Glyphons do not display properly

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

The glyphics test page displays fine in my browser, but when I try to use the icons in a web project, I only get strange characters.

My best guess is that the css glyphicons file cannot find the fonts, even if I copied them to the project, and let the relative templates be 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?

+4
source share
6 answers

Use the Resource Handler , which is the standard mechanism for defining and accessing resources. I see that your resources are placed correctly to do this.

Try replacing the paths on your css for something like this

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

Additional Information:

What is the JSF resource library and how to use it?

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

+3
source

Inside bootstrap-glyphicons.css replace the following lines:

  • src:url('../fonts/glyphiconshalflings-regular.eot')
    for image #{resource['fonts:glyphiconshalflings-regular.eot]}
  • src:url('../fonts/glyphiconshalflings-regular.eot?#iefix')
    for image #{resource['fonts:glyphiconshalflings-regular.eot?#iefix]}
  • src:url('../fonts/glyphiconshalflings-regular.woff')
    for image #{resource['fonts:glyphiconshalflings-regular.woff]}
  • src:url('../fonts/glyphiconshalflings-regular.ttf')
    for image #{resource['fonts:glyphiconshalflings-regular.ttf]}
  • src:url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular')
    for image #{resource['fonts:glyphiconshalflings-regular.svg#glyphicons_halflingsregular]}
+5
source

Take a look here. Omnifaces has already resolved this for us :)

Omnifaces UnmappedResourceHandler

Here we do not need to change the resources of third-party developers at all.

Looks like that:

 <h:head> <h:outputStylesheet name="glyphicons/web/html_css/css/glyphicons.css"/> </h:head>
+1
source 
 @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') }
0
source

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 @ font-face in another .css file and not 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>']}
0
source

For me, the easiest solution was to use bootsfaces and implement at least one bootsfaces element on the page. Then all links to bootsfaces libs were loaded without any problems. Since I had too many problems with layout and javascript with primary objects combined with bootstrap, I replaced all elements of simple elements with simple jsf and bootsfaces and some elements from richfaces. Of course, this is not a solution for every need, but it saved me a lot of time, because I have little knowledge in bootstrap and not much time to spend on css / js / html.

Needless to say, more and more frameworks are working with bootstrap.

0
source

Source: https://habr.com/ru/post/1494797/

More articles:


All Articles