logo标签列表

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

cssjsfmavenfont-awesomewebjars
20
我正在尝试在我的JSF应用中使用Font Awesome图标。通过遵循getting started指南并将以下内容添加到视图的部分，我已经取得了一些成功：Font Awesome和getting started instructions。请注意保留HTML标记。
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet" />

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

输入图片描述

然而，我不希望依赖Bootstrap服务器提供的Font Awesome资源，因此我正在尝试将这些资源与我的war捆绑在一起，并配置我的视图以使用捆绑的资源。

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

然而，这使之前正常工作的主页图标变为： 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应该没有问题找到它。现在我不确定该怎么做。

任何指点都将不胜感激！干杯。

5个回答
30

这些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

基本上，在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 上获取。

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

  • 按照以下步骤在faces-config.xml中注册UnmappedResourceHandler：

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

  • 假设您已经在*.xhtml上有映射，请将/javax.faces.resource/*添加到FacesServlet映射中，假设servlet名称为facesServlet：

    • <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" />

  • 利润。

    • 不确定是否适合在这里发布，但是这个解决方案很好用，但最终会破坏ace:dataExporter/（我认为也会破坏<p:dataExporter/>）。我猜想是因为它们依赖于未映射的资源来导出文件进行下载？日志中出现了类似以下的内容：警告：JSF1091：找不到文件s01a3dc15-c480-4769-a71a-bc08f191416f的MIME类型。 - wsaxton
    @wsaxton：您使用的是哪个OmniFaces版本？自从1.8版本以来，已经有一个hack措施来识别PF动态资源，因此它可以相应地委派。 - BalusC
    我正在使用1.8版本。还有其他的方法可以做到这一点吗？（顺便说一句，如果您想在那里回复的话，我曾在另一篇帖子中提出了这个问题：http://stackoverflow.com/questions/28637732/how-can-i-integrate-font-awesome-with-jsf-difficulties-with-omnifaces-solution） - wsaxton
    @balusc：答案可以简化，可以看看我下面的回答。也许你可以编辑这个回答。 - Kukeltje
    如果你想知道为什么这个不适用于 Font Awesome 5.8.1 版本，我告诉你：现在 jar 包内的路径已经改变了。你必须使用 "webjars/font-awesome/5.8.1/css/fontawesome.css" 作为路径。@BalusC - 你几乎回答了我所有关于 JSF 的问题 :) 非常感谢。 - Gábor Lipták
    显示剩余2条评论
    18

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

    <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发布新内容。

    3
    在令人惊叹的字体版本5.x.x中有一些更改，而<h:outputStylesheet library="webjars" name="font-awesome/5.9.0/css/all-jsf.css" />对我很有效。 - JuliuszJ
    7

    除了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>
    3
    除了 BalusC 和 Hatem Alimam 的回答外，这也可以通过添加以下内容来实现更多帮助：
    <context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

    根据此链接
    是的，自从 5.2 版本起，primefaces 已经原生支持 fontawesome。这是我现在使用的方法。 - Ryan Bennetts
    但是在这种方法中，您将始终落后于最新的font-awesome版本。添加自己的并在我的答案中使用它可以保证最新的版本。 - Kukeltje
    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

    或者使用CSS变量：<h:outputStylesheet library="webjars" name="font-awesome/5.5.0/css/all-jsf.css" /> - Kai
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接