将FontAwesome 5.x与PrimeFaces 6.2+一起使用 [英] Using FontAwesome 5.x with PrimeFaces 6.2+
问题描述
我正在检查以下问题: 如何将webjars.org中的Font Awesome与JSF一起使用 蚂蚁这个问题: 带有PrimeFaces的FontAwesome 其答案 https://stackoverflow.com/a/33070133/5113188
I was checking this question: How to use Font Awesome from webjars.org with JSF ant this question: FontAwesome with PrimeFaces with its answer https://stackoverflow.com/a/33070133/5113188
我想使用 https://fontawesome.com/changelog/latest 5.5 版本
在我的pom.xml
文件项目中...
In my pom.xml
file project...
<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
In my 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
和fa
,但都无法正常工作
Note: I'm using fas
and fa
, but neither is working
就像显示我的图片一样,所有图标都失败了
Like shown my image all icons are failing
如何解决?
推荐答案
在PF 6.2.12和PF 6.3中添加了使用FontAwesome 5的功能.查看此票证并提交,它增加了以下功能:
The ability to use FontAwesome 5 was added in PF 6.2.12 and PF 6.3. See this ticket and commit which adds the ability:
https://github.com/primefaces/primefaces/issues/4276
https://github.com/primefaces/primefaces/commit/c28c0bccc615bffb99
https://github.com/primefaces/primefaces/commit/c28c0bccc615bffb99c30825c8c7d8084c3a72da
在web.xml中关闭默认的PF支持:
Turn default PF support OFF in web.xml:
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>false</param-value>
</context-param>
更新您的pom.xml.
Update your pom.xml.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>5.8.2</version>
</dependency>
为JSF使用正确的WebJars CSS.
Use the proper WebJars CSS for JSF.
<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" />
注意:,因为现在Font Awesome已分为"fas","fab"等不同类别,所以您必须更改"fa".请参见
NOTE: You will have to change your "fa" as now Font Awesome has separated into different categories like"fas" "fab" etc. Please see the documentation here.
这篇关于将FontAwesome 5.x与PrimeFaces 6.2+一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!