如何使用Font Awesome 4.x CSS文件与JSF？浏览器找不到字体文件 [英] How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

问题描述

我想在JSF中整合是使用＃{resource} 映射编辑CSS文件的替代方法，是安装OmniFaces UnmappedResourceHandler 并根据其文档重新配置 FacesServlet 映射。您只需要确保您不再通过库引用字体CSS文件：

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

另请参阅：

• 如何使用JSF的webjars.org使用Font Awesome 3.2.1

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?

解决方案

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 3.2.1 from webjars.org with JSF

这篇关于如何使用Font Awesome 4.x CSS文件与JSF？浏览器找不到字体文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！