19

我正在尝试在我的 JSF 应用程序中使用Font Awesome图标。通过遵循入门说明并将以下内容添加到我的视图部分，我取得了一些成功<h:head>：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet" />

icon-home当我使用该类时，这给了我一个不错的主页图标：

在此处输入图像描述

但是，我不想依赖引导服务器来提供 Font Awesome 资源，所以我试图将这些与我的战争捆绑在一起，并将我的视图配置为使用捆绑的资源。

我正在使用webjars项目创建的预制 JAR 。我的 pom 具有以下依赖项：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>3.2.1</version>
</dependency>

这会将 JAR 放在我的 WAR 的 WEB-INF/lib 目录中。JAR 结构的相关部分是：

META-INF
  - MANIFEST.MF
  + maven
  - resources
    - webjars
      - font-awesome
        - 3.2.1
          - css
            - font-awesome.css
            - *other css files*
          - font
            - *font files*

我尝试了以下方法将图标包含在我的项目中：

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

但是，这会将以前工作的主页图标呈现为：

在此处输入图像描述

我的浏览器（Chrome）在控制台中显示以下错误（域/端口/上下文根更改以保护无辜；）：

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)

因此，看起来虽然 css 文件已正确解析，但无法找到包含 css 文件引用的字体的文件。我已经检查了 css 文件中的这些引用，它们是：

src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');

这些路径是相对于 css 资源的，所以我认为 JSF 找到它应该没有问题。现在我不知道该怎么办。

任何指针都会很棒！干杯。

4

5 回答 5

29

这些 URL 中缺少 JSF 映射和库名称。如果您已经映射了FacesServleton *.xhtml，那么这些 URL 实际上应该是：

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars

本质上，您应该#{resource}在 CSS 文件中使用来打印正确的 JSF 资源 URL：

src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&v=3.2.1");
src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&#iefix&v=3.2.1");

但是，由于源代码实际上不在您的控制范围内（您无法对其进行编辑），因此没有其他方法可以自己管理资源处理。JSF 实用程序库OmniFaces为确切用途提供了UnmappedResourceHandler开箱即用的功能。通过以下步骤，您的问题应该得到解决：

  1. 安装 OmniFaces，它也可以在 Maven 上使用。

    <dependency>
    <groupId>org.omnifaces</groupId>
    <artifactId>omnifaces</artifactId>
    <version><!-- Check omnifaces.org for current version. --></version>
</dependency>

  2. 注册UnmappedResourceHandler如下faces-config.xml：

    <application>
    <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
</application>

  3. 添加/javax.faces.resource/*到FacesServlet映射，假设 servlet 名称是facesServlet并且您已经在 上进行了映射*.xhtml：

    <servlet-mapping>
    <servlet-name>facesServlet</servlet-name>
    <url-pattern>/javax.faces.resource/*</url-pattern>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

  4. 将<h:outputStylesheet>库名称移动到资源名称中。

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

  5. 利润。

于 2013-09-19T12:25:54.853 回答
17

上面的答案有点过时了。从之前的一些版本开始，font-awesome 的 webjar 版本包括一个特定的 jsf-ified 版本的 css，所以没有什么需要配置的。通过maven将 jar 添加到您的项目中 

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>font-awesome</artifactId>
   <version>4.6.3</version>
</dependency>

或直接，它只是工作。只需确保包含正确的 css

<h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />

注意名称中的 -jsf ！！！这样，您的应用程序中始终可以拥有最新版本，而无需依赖 PF 发布新内容

于 2015-02-22T00:11:21.277 回答
7

除了 BalusC 答案之外，最好将以下mime-mappings 添加到web.xml

<!-- web fonts -->
<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>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>
<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ico</extension>
    <mime-type>image/x-icon</mime-type>
</mime-mapping>
于 2014-06-19T09:10:02.010 回答
3

除了BalusC和Hatem Alimam 的答案之外，通过添加以下内容也可能很有用：

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

根据这个链接

于 2015-05-12T03:08:12.457 回答
2

对于primefaces 6.2，这对我来说也很好

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>font-awesome</artifactId>
        <version>5.5.0</version>
    </dependency>

在 xhtml 文件中：

<h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>

请注意，您必须将用法从 4 更改为 5，例如fa fa-plus，fas fa-plus基于网页 - https://fontawesome.com/icons/plus?style=solid

于 2018-11-26T17:08:06.957 回答