I am trying to use Font Awesome icons with my JSF application. I have had some success by following the getting started instructions and adding the following to my view's <h:head>
section:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet" />
This gives me a nice home icon when I use the icon-home
class:
However, I don't want to be dependent on the bootstrap server to provide the Font Awesome resources, so I am trying to bundle these with my war, and configure my views to use the bundled resources.
I am using the pre-made JAR created by the webjars project. My pom has the following dependency:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>3.2.1</version>
</dependency>
This places the JAR in my WAR's WEB-INF/lib directory. The relevent parts of the JAR's structure are:
META-INF
- MANIFEST.MF
+ maven
- resources
- webjars
- font-awesome
- 3.2.1
- css
- font-awesome.css
- *other css files*
- font
- *font files*
I have tried the following to include the icons in my project:
<h:outputStylesheet library="webjars"
name="font-awesome/3.2.1/css/font-awesome.css" />
However, this renders the previously working home icon as:
And my browser (Chrome) shows the following errors in the console (domain/port/context-root changed to protect the innocent ;):
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found)
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found)
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)
So it looks like although the css file is resolved properly, the files which contain the fonts that the css file refers to cannot be found. I have checked those references in the css file and they are:
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
Those paths are relative to the css resource, so I thought JSF should have no problem finding it. Now I'm not sure what to do.
Any pointers would be great! Cheers.
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:
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>
Register UnmappedResourceHandler
in faces-config.xml
as follows:
<application>
<resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
</application>
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>
Move the <h:outputStylesheet>
library name to into the resource name.
<h:outputStylesheet name="webjars/font-awesome/3.2.1/css/font-awesome.css" />
Profit.