将 FontAwesome 5.x 与 PrimeFaces 6.2+ 结合使用

2024-01-12

我正在检查这个问题:如何将 webjars.org 中的 Font Awesome 与 JSF 结合使用 https://stackoverflow.com/q/18891768/811293蚂蚁这个问题:FontAwesome 与 PrimeFaces https://stackoverflow.com/q/21052851/5113188及其答案https://stackoverflow.com/a/33070133/5113188 https://stackoverflow.com/a/33070133/5113188

嗨,我想使用新的图标https://fontawesome.com/changelog/latest https://fontawesome.com/changelog/latest 5.5 version

In my pom.xml文件项目...

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>6.2</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces.extensions</groupId>
        <artifactId>primefaces-extensions</artifactId>
        <version>6.2</version>
    </dependency>
    <dependency>
        <groupId>org.omnifaces</groupId>
        <artifactId>omnifaces</artifactId>
        <version>2.1</version>
    </dependency>


    <!-- https://mvnrepository.com/artifact/org.webjars/font-awesome -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>font-awesome</artifactId>
        <version>5.5.0</version>
    </dependency>

in my web.xml file

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

在我的 Facelet .xhtml 中

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/template.xhtml">
    <ui:define name="body">
        <h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>

...

    <p:spacer width="10"/>6
    <h:outputText styleClass="fas fas-map"/>7
    <h:outputText styleClass="fa fa-venus-mars fa-icon-custom" />
    <h:outputText styleClass="fa fa-female fa-icon-custom" />
    <h:outputText styleClass="fa fa-male fa-icon-custom" />

注意:我正在使用fas and fa,但两者都不起作用

就像我的图片所示,所有图标都失败了

怎么解决这个问题?


PF 6.2.12 和 PF 6.3 中添加了使用 FontAwesome 5 的功能。请参阅此票证并提交,它增加了以下功能:

https://github.com/primefaces/primefaces/issues/4276 https://github.com/primefaces/primefaces/issues/4276

https://github.com/primefaces/primefaces/commit/c28c0bccc615bffb99c30825c8c7d8084c3a72da https://github.com/primefaces/primefaces/commit/c28c0bccc615bffb99c30825c8c7d8084c3a72da

在 web.xml 中关闭默认 PF 支持:

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

更新您的 pom.xml。

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

对 JSF 使用正确的 WebJars CSS。

<h:outputStylesheet library="webjars" name="font-awesome/5.8.2/css/all.min-jsf.css" />
<h:outputStylesheet library="webjars" name="font-awesome/5.8.2/css/v4-shims.min-jsf.css" />

NOTE:您必须更改您的“fa”,因为现在 Font Awesome 已分为不同的类别,例如“fas”“fab”等。请参阅文档在这里 https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 FontAwesome 5.x 与 PrimeFaces 6.2+ 结合使用 的相关文章

随机推荐

  • 使用 Angular 和 Express 登录用户的正确方法是什么?

    我正在构建一个简单的网站 我想让用户使用 Facebook 登录 然后根据他们是否登录显示包含自定义项目的页面 即 如果未登录 它会显示一些信息 但如果登录 它会根据用户信息显示其他信息 我正在使用 Passportjs Facebook
  • 在 Tomcat 中的上下文之间转发请求

    我希望能够使用 Tuckey URLRewrite 过滤器在 Tomcat 中进行跨上下文请求转发 例如 我希望能够使用 SEO 用户友好的 URL 路由传入请求 例如http example com group elements 3002
  • C# try {} catch {}

    您好 感谢您的阅读 我是编程以及 C 和套接字编程的新手 在我的代码中 我尝试捕获问题以在我的应用程序中提供容错能力 下列 catch ArgumentNullException e OnNetworkEvents eventArgs ne
  • SQL Server 2016 始终加密已发布 IIS 超时

    当我尝试将我的 asp net mvc 应用程序发布到我的本地 pc iis 并启用 始终加密 时 我遇到了奇怪的问题 当我尝试在本地 IIS 非快速 上使用 EF6 访问数据库时 我的应用程序保持超时 但是 如果我尝试使用 Visual
  • JavaScript 预加载图像

    我正在尝试预加载图像 以下代码有效 document ready function member photos img each function var id this attr data id var file this attr da
  • php中if条件满足后如何重定向到另一个页面? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我使用了 php 代码来重定向到另一
  • 输入元素中 textContent 的用途是什么?

    在 DOM 中提供一个输入元素 它确实有一个textContent财产连同value 众所周知 输入的值就是文本框中显示的值 并且该元素不能有任何子元素 即
  • 使用Java流合并一对“int”数组[重复]

    这个问题在这里已经有答案了 这一页 https www javatpoint com how to merge two arrays in java展示了如何组合两个数组Integer对象放入数组中Object对象 Integer firs
  • Microsoft SQL Server Express:不再支持此版本的安装程序

    我正在尝试安装 Microsoft SQL Server 2019 Express 但我不断遇到上述错误消息 我最初在尝试安装时遇到了一条单独的错误消息 无法下载所需的文件 我按照以下线程中的说明进行操作 这解决了最初的问题 但现在出现了新
  • 我如何扩展 boost Spirit 语法

    问题是我编写了一个对某项任务有用的语法 但现在 任务发生了变化 我需要定义新的规则 但我不想修改我已有的语法而不是我想要的 喜欢创建一个新的语法 使用我现有的语法 无需代码 重复 所以我只需要定义我需要的新规则 我尝试过一些东西 像这样 但
  • 如何删除Windows中的长路径。

    将项目导入 Eclipse 时 它 以某种方式开始创建目录的递归版本 现在 当我尝试删除任何内容时 我收到消息 您指定的文件名太长 我无法从命令 shell 中删除它 我无法从资源管理器中删除它 我不能用它做任何事 我不知道 Eclipse
  • ss 命令显示 TIME_WAIT 而不是 CLOSE_WAIT,这在逻辑上不符合

    我试图理解 TIME WAIT 和 CLOSE WAIT 我已经通过 Chrome 控制台打开了一个套接字连接 该连接连接到本地运行的 Java WebSocket 服务器 然后将其关闭 var webSocket new WebSocke
  • 将gradle临时目录设置为SSD

    我正在使用带有 gradle 的 android studio 当我构建应用程序时 我注意到旋转硬盘工作量很大 所以我查看并看到 gradle 正在将临时文件写入变量定义的目录 在 Windows 8 1 中 TEMP or TMP在我的用
  • 从 Android 上传文件到 wowza

    我已经安装了 wowza 服务器并且能够使用 android 中的视频视图从客户端播放文件 现在我必须录制视频并且必须将文件上传到 wowza 服务器 如何编写服务器端应用程序 以及如何从 android 代码连接它 有人有这方面的经验吗
  • Stripe Connect PaymentIntent 错误:没有这样的 payment_intent

    我在 API 中使用 stripe connect 并且我想更新和处理现有的 paymentIntent 使用NodeJS stripe包创建 paymentIntent 成功 const paymentIntent await strip
  • 在 PyQt 中,如何将项目和所选项目保存在组合框中

    我填充组合框 用户选择其中一个选项 然后他们关闭一切 稍后 用户可能会再次打开窗口 要求他们重新输入并重新选择选项会很乏味 所以我想 加载 它们 我尝试使用 pickle 但显然出现与 Qt 相关的错误 self WordCardsFiel
  • 无法将用户添加到 Hyper-V 管理员组退出代码 2220

    我将 Windows 10 LTSB 与 Visual Studio 2015 结合使用 启用后Hyper V 我安装了独立的Visual Studio Emulator for Android Hyper V 运行良好 因为可以向其中添加
  • 无法获取资源“https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom”

    我最近开始使用 React Native 但是根据伊朗制裁 gradle 无法构建我的第一个项目 所以我使用了 VPN 也舍餐服务 https shecan ir 但我收到以下错误 我阅读了 React Native 说明并按照它们设置了模
  • 如何清空 Drupal 缓存(无需 Devel)

    如何清空 Drupal 缓存 without开发模块 无需在新节点等中运行一些 PHP 语句 无需进入数据库本身 实际上 您如何指示最终用户清除其缓存 当您以管理员身份登录时 显然 并非该网站的每个用户都有权清除缓存 应该有一个页面 管理
  • 将 FontAwesome 5.x 与 PrimeFaces 6.2+ 结合使用

    我正在检查这个问题 如何将 webjars org 中的 Font Awesome 与 JSF 结合使用 https stackoverflow com q 18891768 811293蚂蚁这个问题 FontAwesome 与 Prime