如何使用来自 webjars.org 的 Font Awesome 和 JSF [英] How to use Font Awesome from webjars.org with JSF

问题描述

我正在尝试在我的 JSF 应用程序中使用 项目.我的 pom 具有以下依赖项:

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

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

META-INF- 清单.MF+ 行家- 资源- 网络jar- 字体真棒- 3.2.1- css- font-awesome.css- *其他css文件*- 字体- *字体文件*

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

<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(未找到))获取 http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404(未找到)获取 http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404(未找到)

所以看起来虽然css文件被正确解析了，但是包含css文件引用的字体的文件却找不到.我检查了 css 文件中的那些引用，它们是:

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

那些路径是相对于css资源的，所以我认为JSF应该可以找到它.现在我不知道该怎么办.

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

解决方案

这些 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获取 http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1获取 http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars

本质上，您应该在 CSS 文件中使用 #{resource} 来打印正确的 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 上使用.

   <依赖><groupId>org.omnifaces</groupId><artifactId>omnifaces</artifactId><version><!-- 检查 omnifaces.org 以获取当前版本.--></版本></依赖>

2. 在faces-config.xml中注册UnmappedResourceHandler如下:

   <应用程序><resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler></应用程序>

3. 将 /javax.faces.resource/* 添加到 FacesServlet 映射，假设 servlet 名称是 facesServlet 并且您已经在 *.xhtml 上做了一个映射:

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

4. 将 库名称移到资源名称中.

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

5. 利润.

I am trying to use Font Awesome icons with my JSF application. I have had some success by following the getting started instructions and adding the following to my view's <h:head> section:

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

This gives me a nice home icon when I use the icon-home class:

However, I don't want to be dependent on the bootstrap server to provide the Font Awesome resources, so I am trying to bundle these with my war, and configure my views to use the bundled resources.

I am using the pre-made JAR created by the webjars project. My pom has the following dependency:

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

This places the JAR in my WAR's WEB-INF/lib directory. The relevent parts of the JAR's structure are:

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

I have tried the following to include the icons in my project:

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

However, this renders the previously working home icon as:

And my browser (Chrome) shows the following errors in the console (domain/port/context-root changed to protect the innocent ;):

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)

So it looks like although the css file is resolved properly, the files which contain the fonts that the css file refers to cannot be found. I have checked those references in the css file and they are:

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');

Those paths are relative to the css resource, so I thought JSF should have no problem finding it. Now I'm not sure what to do.

Any pointers would be great! Cheers.

解决方案

The JSF mapping and library name is missing in those URLs. If you've mapped your FacesServlet on *.xhtml, then those URLs should actually have been:

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

Essentially, you should be using #{resource} in CSS file to print the proper JSF resource 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");

However, as the source code is actually outside your control (you can't edit it), then there's no other way to manage the resource handling yourself. The JSF utility library OmniFaces provides the UnmappedResourceHandler out the box for the exact purpose. With the following steps your problem should be solved:

1. Install OmniFaces, it's available on Maven as well.

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

2. Register UnmappedResourceHandler in faces-config.xml as follows:

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

3. Add /javax.faces.resource/* to FacesServlet mapping, assuming that the servlet name is facesServlet and you've already a mapping on *.xhtml:

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

4. Move the <h:outputStylesheet> library name to into the resource name.

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

5. Profit.

这篇关于如何使用来自 webjars.org 的 Font Awesome 和 JSF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！