@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;
}

如果在不同的路径上请求CSS文件本身,这将失败. JSF< h：outputStylesheet>如果指定库属性,将执行此操作.此外,JSF将为这些资源使用特殊的/javax.faces.resource/*前缀模式,以便特别调用JSF资源处理程序,从而允许自定义.细节可以在What is the JSF resource library for and how should it be used?找到

提供如下文件夹结构,

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
 :

Font Awesome CSS包含如下：

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

然后你需要编辑如下的CSS文件,使用EL中的#{resource}映射来引用/ resources文件夹中的字体文件和相应的库和资源名称(并且库名最终作为查询字符串参数,你,还需要替换？by&,如果你不使用库名,这不是必需的).

@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;
}

确保在编辑CSS文件后重新启动服务器.在JSF资源处理程序第一次读取CSS文件然后记住应用程序范围时,只检测到某个CSS文件中EL表达式的存在.

如果您在服务器日志中看到JSF1091警告,请查看以下字体文件：

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.

然后,您需要通过将以下mime映射添加到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>

如果您碰巧使用JSF实用程序库OmniFaces,使用#{resource}映射编辑CSS文件的替代方法是安装OmniFaces UnmappedResourceHandler并根据其文档重新配置FacesServlet映射.您只需要确保不再通过库引用字体CSS文件：

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

也可以看看：

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