Question

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

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

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

enter image description here

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

我正在使用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"  />

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

enter image description here

我的浏览器（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

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

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

基本上，您应该在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用于确切目的的框。通过以下步骤，您的问题应该得到解决：

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

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

在UnmappedResourceHandler中注册faces-config.xml，如下所示：

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

将/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>

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

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

利润。

Answer 2

上面的答案有点过时了。自从一些版本发布以来，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发布新内容

Answer 3

除了BalusC的回答，最好将以下mime-mapping添加到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>

Answer 4

除了 BalusC 和 Hatem Alimam 之外，这还可以添加：

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

根据此link

Answer 5

对于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"/>

请注意，您必须根据网页-https://fontawesome.com/icons/plus?style=solid

将使用量从4更改为5，例如将fa fa-plus更改为fas fa-plus。

如何使用webjars.org上的Font Awesome和JSF

5 个答案: