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

Question

我正在尝试使用 Font Awesome我的 JSF 应用程序的图标。我通过关注 getting started instructions 取得了一些成功并将以下内容添加到我的 View 中 <h:head>部分:

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

当我使用 icon-home 时，这给了我一个漂亮的主页图标类:

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

我正在使用 pre-made JAR由 webjars 创建元素。我的 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 应该没有问题找到它。现在我不知道该怎么办。

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

Answer 1

这些 URL 中缺少 JSF 映射和库名称。如果您映射了您的 FacesServlet在 *.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. 利润。