primefaces - 将 FontAwesome 5.x 与 PrimeFaces 6.2+ 一起使用
问题描述
我正在检查这个问题: How to use Font Awesome from webjars.org with JSF ant 这个问题: FontAwesome with PrimeFaces with its answer https://stackoverflow.com/a/33070133/5113188
您好我想使用https://fontawesome.com/changelog/latest 5.5版本的新图标
在我的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>
在我的web.xml
档案中
<!-- 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/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" />
注意:您必须更改您的“fa”,因为现在 Font Awesome 已分为不同的类别,如“fas”“fab”等。请参阅此处的文档。
推荐阅读
- javascript - 如何填充复杂的反应状态?
- java - 如何使用不同的系统属性值执行两个完全相同的 Maven 配置文件?
- c - 为什么会出现分段错误?
- angular - 如何在角度 html 模板中动态更改 Ionic 元素的属性?
- javascript - 根据字典长度创建多个图表
- node.js - 使用 Axios Node.js 请求 oAuth2 令牌 - 使用“请求”但不适用于 Axios
- awk - 将每一列除以另一列
- firebase - 在 Flutter 中从 Firebase RealTime DB 接收对象
- wpf - 当应用程序不在焦点时更改键盘语言
- python - 为什么程序不循环?