AHméd Net AHméd Net - 5 months ago 173
CSS Question

How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

I'm trying to integrate Font Awesome in JSF.

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />


But the browser can't find the font files. They appear as empty squares:

enter image description here

I expected them to look like below:

enter image description here

How is this caused and how can I solve it?

Answer

The Font Awesome CSS file is by default referencing those font files via a relative path ../ like below:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

This will fail if the CSS file itself is requested on a different path. The JSF <h:outputStylesheet> will do that if you specify the library attribute. Moreover, the JSF will use a special /javax.faces.resource/* prefix pattern for those resources so that specifically the JSF resource handler will be invoked which allows customization freedom. Detail can be found in What is the JSF resource library for and how should it be used?

Provided a folder structure like below,

WebContent
 |-- resources
 |    `-- font-awesome
 |         |-- css
 |         |    |-- font-awesome.css
 |         |    `-- font-awesome.min.css
 |         `-- fonts
 |              |-- fontawesome-webfont.eot
 |              |-- fontawesome-webfont.svg
 |              |-- fontawesome-webfont.ttf
 |              |-- fontawesome-webfont.woff
 |              `-- fontawesome-webfont.woff2
 :

And the Font Awesome CSS being included as below:

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />

Then you need to edit the CSS file as below to use #{resource} mapping in EL to reference the font files in /resources folder with the appropriate library and resource name (and as library name ends up as a query string parameter already, you also need to replace ? by &, this is not necessary if you don't use a library name).

@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&v=4.3.0");
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&#iefix&v=4.3.0") format('embedded-opentype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&v=4.3.0") format('woff2'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&v=4.3.0") format('woff'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&v=4.3.0") format('truetype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&v=4.3.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

Make sure you restart the server after editing the CSS file. The presence of EL expressions in a certain CSS file is detected only once during the first time the JSF resource handler reads the CSS file and then remembered applicationwide.

In case you're seeing JSF1091 warnings in server logs for those font files like below:

WARNING: JSF1091: No mime type could be found for file [some font file]. To resolve this, add a mime-type mapping to the applications web.xml.

Then you need to act accordingly by adding below mime mappings to web.xml:

<mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>otf</extension>
    <mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/x-font-woff2</mime-type>
</mime-mapping>

If you happen to use JSF utility library OmniFaces, an alternative to editing the CSS file with the #{resource} mapping, is to install the OmniFaces UnmappedResourceHandler and reconfigure the FacesServlet mapping as per its documentation. You only need to make sure that you don't reference the font CSS file via library anymore:

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

See also: