Using bootstrap 3 glypicons with webjars and jsf2.2

Question

I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).

When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404

I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?

This is how I'm including boostrap, which works correctly for css:

<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />

And this is how I'm using the css classes:

<button><span class="glyphicon glyphicon-minus"></span></button>

Answer 1

You should use <link> tag instead of <h:outputStylesheet> eg.

<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>

--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter: faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars

in bootstrap.min.css CSS there are such references to files: url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),

so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files

In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>

Answer 2

Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:

<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />

Note the -jsf suffix.