如何在JSF中使用Font Awesome 4.x CSS文件？浏览器找不到字体文件

Question

我正在尝试将Font Awesome集成到JSF中.

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

但是浏览器找不到字体文件.它们显示为空方块:

我希望它们如下所示:

这是怎么造成的,我该如何解决？

Answer 1

Font Awesome CSS文件默认通过以下相对路径引用这些字体文件../:

@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文件本身,这将失败.<h:outputStylesheet>如果指定library属性,JSF 将执行此操作.此外,JSF将为/javax.faces.resource/*这些资源使用特殊的前缀模式,以便特别调用JSF资源处理程序,从而允许自定义.详细信息可以在什么是JSF资源库中找到,以及如何使用它？

提供如下文件夹结构,

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文件,如下使用#{resource}映射EL引用的字体文件/resources与适当的库和资源名称(如库名称作为查询字符串参数已经结束了文件夹,也需要更换?的&,如果您不使用库名称,则不需要这样做.

@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警告,请查看以下字体文件:

警告:JSF1091:找不到文件[某些字体文件]的mime类型.要解决此问题,请将mime类型映射添加到应用程序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根据其文档重新配置映射.您只需要确保library不再通过字体CSS文件引用:

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

也可以看看:

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