如何在 JSF 中使用 Font Awesome 等 3rd 方 CSS 库？ 浏览器找不到 CSS 文件中引用的字体文件

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?

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

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

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;

}

Answer 4

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/..."

Answer 5

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.