How to use Font Awesome from webjars.org with JSF

The JSF mapping and library name is missing in those URLs. If you’ve mapped your FacesServlet on *.xhtml, then those URLs should actually have been:

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars

Essentially, you should be using #{resource} in CSS file to print the proper JSF resource URL:

src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&v=3.2.1");
src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&#iefix&v=3.2.1");

However, as the source code is actually outside your control (you can’t edit it), then there’s no other way to manage the resource handling yourself. The JSF utility library OmniFaces provides the UnmappedResourceHandler out the box for the exact purpose. With the following steps your problem should be solved:

1. Install OmniFaces, it’s available on Maven as well.

   <dependency>
       <groupId>org.omnifaces</groupId>
       <artifactId>omnifaces</artifactId>
       <version><!-- Check omnifaces.org for current version. --></version>
   </dependency>
   

2. Register UnmappedResourceHandler in faces-config.xml as follows:

   <application>
       <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
   </application>
   

3. Add /javax.faces.resource/* to FacesServlet mapping, assuming that the servlet name is facesServlet and you’ve already a mapping on *.xhtml:

   <servlet-mapping>
       <servlet-name>facesServlet</servlet-name>
       <url-pattern>/javax.faces.resource/*</url-pattern>
       <url-pattern>*.xhtml</url-pattern>
   </servlet-mapping>
   

4. Move the <h:outputStylesheet> library name to into the resource name.

   <h:outputStylesheet name="webjars/font-awesome/3.2.1/css/font-awesome.css" />
   

5. Profit.