How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file

Question

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:

I expected them to look like below:

How is this caused and how can I solve it?

Monstrous

what did YOU investigate? – Mala

Read stackoverflow.com/tags/jsf/info --> "Any faces messages or warnings/errors/exceptions in browser console or server logs?" and update your question accordingly. Surely the webbrowser must have given clues. – Eudiometer

thank's you are right sir, there is many errors : i can't locate many files like "fonts/fontawesome-webfont.ttf?v=4.2.0" – Monstrous

Possible duplicate of How can I integrate Font Awesome 4.3.0 with JSF? – Mala

Answer 1

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:

• How to use Font Awesome from webjars.org with JSF

Eudiometer

Thank's it's work for me but you have to replace "?" by "&" like that : url('localhost:8080/Students_manager/javax.faces.resource/…) format('truetype'), – Monstrous

Right, overlooked that bit. Fixed. – Eudiometer

@BalusC: using the font-awesome rom webjars contains all these things. I think there even is a SO Q/A about it. Way easier to maintain – Mala

The mime mapping in web.xml worked for me i just had to remove the tmp content in jboss7 (took more than a day to solve this o.O ) – Playsuit

in case someone needs it, i created a regex for it: search: url('\.\./(([a-zA-Z/-]+)\.([eotsvgttfwoffwoff2]{1,5}))'{0,1}([?\.&=#a-zA-Z0-9]{0,})'{1} replace with: url("#{resource['external:fontawesome/$2.$3']}&$4" where my directory is like wepapp/external/fontawesome .. you might need to adjust that – Pictorial

I am not getting any error now on console but Icons are still not shown. By the way it is now v=4.7.0 now. – Littman

I got these warnings after installing a PF premium theme. Putting the mime-mappings into web.xml helped me. – Chiffonier

Answer 2

Also PrimeFaces 5.11 has Font Awesome out of the box

Just add this context-param to your web.xml:

<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

Then you can apply Font Awesome icons this way:

<p:submenu label="Time" icon="fa fa-clock-o">

References:

• Primefaces Font Awesome

Insurgency

Since your answer is a PrimeFaces specific one and this question is not PrimeFaces related, stackoverflow.com/questions/28637732/… would have been a better referral. In my opinion it is weird PF duplicates all the work themselves that is already done in webjar – Mala

Answer 3

I changed the path in "font-awesome.css" and work fine

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

}

Retro

Path is dependent from FacesServlet mapping and this "solution" may therefore not apply to everyone. – Eudiometer

Even better, use the fontawesome version from webjar. It contains all this. Way more simple to maintain – Mala

Answer 4

You just need to manually include it via your pom.xml:

<!-- https://mvnrepository.com/artifact/org.webjars/font-awesome -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>6.5.1</version>
</dependency>

Then include these two CSS stylesheets (do it in your template to load them in each page) to enable it:

<h:outputStylesheet library="webjars" name="font-awesome/6.5.1/css/all.min-jsf.css" />
<h:outputStylesheet library="webjars" name="font-awesome/6.5.1/css/v4-shims.min-jsf.css" />

Glance

Answer 5

i changed the path of oet,ttf,svg,woff files in "font-awesome.min.css" file like this :

http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.svg.xhtml?ln=font-awesome/fonts&v=4.2.0#fontawesomeregular

it's working fine for me but i still looking for another solution because i should have a dynamic path not a static like "http://localhost:8080/Students_manager/..."

Monstrous

Answer 6

Same answer as BalusC with some changes. Note: I'm integrating Metronic Theme.

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

same goes for simple-line-icons.min.css

and as BalusC said add change web.xml by adding the lines in his answer.

Subtraction

Use use the webjar fontawesome jar, no need for all these complex changes. And please state what changes there are. We should not have to do a manual compare! – Mala

no you can't use the jar, in my answer I talked about integrating a html theme (like metronic) in a JSF application. + any one who have read this question, he would read the accepted answer so no need for me to copy paste that answer, and the changes I made are pretty clear. – Subtraction