How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
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
How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
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
How to use Font Awesome from webjars.org with JSF
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
infaces-config.xml
as follows:<application>
<resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
</application>Add
/javax.faces.resource/*
toFacesServlet
mapping, assuming that the servlet name isfacesServlet
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.
How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
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
How can I integrate Font Awesome 4.3.0 with JSF?
If you use the latest webjars font-awesome version, there is nothing to configure. Add the jar to your project, either via maven or directly and it just works. Just make sure you include the correct css
<h:outputStylesheet library="webjars" name="font-awesome/4.3.0/css/font-awesome-jsf.css" />
Can I reference the font-face in a separate 3rd party CSS file?
The new font awesome has a new font name. Try using
font-family: "Font Awesome 5 Brands";
It is working in my fiddle:
https://jsfiddle.net/honsa/akexzjg8/7/
Related Topics
Changing :Hover to Touch/Click For Mobile Devices
Is !Important Bad For Performance
Ampersand (&) at the End, and Part of, a Selector in SASS
Search Input With an Icon Bootstrap
Webkit: Blurry Text With CSS Scale + Translate3D
Twitter Bootstrap - Add Top Space Between Rows
Is Background-Color:None Valid CSS
Image Greyscale with CSS & Re-Color on Mouse-Over
What's the Difference Between Inline Styles VS Classes
Using Variables in Property Names in Less (Dynamic Properties/Property Name Interpolation)
Sass Invalid CSS Error: "Expected Expression"
When Setting a Font-Size in CSS, What Is the Real Height of the Letters
CSS Transition with Linear Gradient
Css: Center Element Within a ≪Div≫ Element
How to Clear the Cache of Nginx