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

Question

我正尝试在JSF中整合Font Awesome。

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

但是浏览器无法找到字体文件，它们显示为空白方块： 我期望它们看起来像下面这样： 这是什么原因导致的？如何解决？

- AHmedRef

---

你调查了什么？ - Kukeltje

阅读http://stackoverflow.com/tags/jsf/info -->“浏览器控制台或服务器日志中是否有任何面部消息、警告/错误/异常？”并相应地更新您的问题。肯定是Web浏览器必须提供线索。 - BalusC

谢谢您，您是正确的先生，有很多错误：我无法定位许多文件，例如“fonts/fontawesome-webfont.ttf?v=4.2.0”。 - AHmedRef

可能是如何将Font Awesome 4.3.0与JSF集成？的重复问题。 - Kukeltje

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资源处理程序，从而实现自定义自由度。详细信息可以在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：找不到文件[some font file]的MIME类型。要解决此问题，请将mime-type映射添加到应用程序的web.xml中。

然后您需要通过向web.xml添加以下mime映射来采取相应措施：

<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文件的替代方法是安装OmniFacesUnmappedResourceHandler并根据其文档重新配置FacesServlet映射。您只需要确保不再通过library引用字体CSS文件即可：

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

参见：

• 如何在JSF中使用来自webjars.org的Font Awesome

- BalusC

---

谢谢，这对我有用，但你必须将“？”替换为“&”，就像这样：url（'http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.ttf.xhtml?ln=font-awesome/fonts&v=4.2.0'）format（'truetype'）， - AHmedRef

好的，忽略了那一部分。已修复。 - BalusC

@BalusC：使用Webjars中的font-awesome包含所有这些内容。我认为甚至有一个关于它的SO Q/A。维护起来更容易。 - Kukeltje

web.xml 中的 MIME 映射对我起了作用，我只是不得不删除 jboss7 中的 tmp 内容（花了一天多的时间才解决这个问题 o.O） - sherif

现在控制台没有任何错误，但图标仍未显示。顺便说一下，现在是v=4.7.0。 - Faizan Mubasher

Answer 2

此外，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 图标：Font Awesome。

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

参考文献：

• Primefaces 图标字体

- Jalal Sordo

---

由于您的回答是PrimeFaces特定的，而这个问题与PrimeFaces无关，http://stackoverflow.com/questions/28637732/how-can-i-integrate-font-awesome-4-3-0-with-jsf 将是一个更好的引用。在我看来，奇怪的是PF会重复所有已经在webjar中完成的工作。 - Kukeltje

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;

}

- Andrei Lepsch

---

路径取决于FacesServlet映射，因此这个“解决方案”可能不适用于所有人。 - BalusC

更好的做法是使用来自WebJar的fontawesome版本。它包含了所有这些内容。维护起来更加简单。 - Kukeltje

Answer 4

和 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。

- usertest

---

使用webjar fontawesome jar，不需要进行所有这些复杂的更改。请说明有哪些更改。我们不应该手动比较！ 使用webjar fontawesome jar，无需进行繁琐的更改。请明确指出有哪些更改。我们不应该手动比较！ - Kukeltje

不, 你不能使用jar包。在我的回答中，我谈到了如何在JSF应用程序中集成一个HTML主题（如Metronic）。任何阅读这个问题的人都会阅读被接受的答案，所以我没有必要复制粘贴那个答案，而且我所做的更改也很明显。 - usertest

Answer 5

我在“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/..."

- AHmedRef