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

时间:2015-07-15 15:36:35

标签: css jsf font-awesome

我试图将Font Awesome集成到JSF中。

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

但浏览器无法找到字体文件。它们显示为空方块:

enter image description here

我希望它们如下所示:

enter image description here

这是如何引起的?如何解决?

5 个答案:

答案 0 :(得分:23)

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>属性,JSF library将执行此操作。此外,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文件夹中的字体文件以及相应的库和资源名称(并且库名最终为已经是一个查询字符串参数,您还需要将?替换为&,如果您不使用库名称,则无需这样做。

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

另见:

答案 1 :(得分:3)

primefaces>5.11开箱即用Font Awesome

只需将此context-param添加到您的web.xml

即可
<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

然后您可以这样申请Font Awesome图标:

<p:submenu label="Time"  icon="fa fa-clock-o">

参考文献:

答案 2 :(得分:0)

我改变了&#34; font-awesome.min.css&#34;中的oet,ttf,svg,woff文件的路径。像这样的文件:

http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.svg.xhtml?ln=font-awesome/fonts&v=4.2.0#fontawesomeregular

它对我来说运行正常,但我仍然在寻找另一种解决方案,因为我应该有一个动态路径,而不是静态的"http://localhost:8080/Students_manager/..."

答案 3 :(得分:0)

我更改了“font-awesome.css”中的路径并正常工作

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

}

答案 4 :(得分:0)

BalusC 相同的答案有一些变化。注意:我正在整合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}
{p>同样适用于simple-line-icons.min.css

并且正如BalusC所说,通过在答案中添加行来添加更改web.xml

enter image description here