如何在 JSF 中使用第三方 CSS 库，例如 Font Awesome？浏览器找不到 CSS 文件中引用的字体文件

Question

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

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

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

我希望它们看起来像下面这样：

这是怎么引起的，我该如何解决？

Answer 1

我像这样更改了 "font-awesome.min.css" 文件中 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/..."

这样的静态路径

Answer 2

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 文件本身，这将失败。如果您指定 library 属性，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 文件夹中具有适当库和资源名称的字体文件（以及由于库名已经作为查询字符串参数结束，您还需要将 ? 替换为 &，如果您不使用库名，则不需要这样做。

@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, an alternative to editing the CSS file with the #{resource} mapping, is to install the OmniFaces UnmappedResourceHandler 并根据其文档重新配置 FacesServlet 映射。您只需要确保不再通过 library 引用字体 CSS 文件：

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

另请参阅：

How to use Font Awesome from webjars.org with JSF

Answer 3

我更改了 "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;

}

Answer 4

还有 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">

参考资料：

Primefaces Font Awesome

Answer 5

与 BalusC 相同的答案，但有一些变化。注意：我正在集成 Metronic 主题。

*/@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}

simple-line-icons.min.css

也一样

正如 BalusC 所说，通过在他的答案中添加行来添加更改 web.xml。

如何在 JSF 中使用第三方 CSS 库，例如 Font Awesome？浏览器找不到 CSS 文件中引用的字体文件

How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file

css

jsf

font-awesome

另请参阅：