Thursday, 19 September 2013

How to use Font Awesome with JSF

How to use Font Awesome with JSF

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.

3 comments:

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

    do it like this.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete