p:commandButton icons from fontawesome

Question

i would like to put icons from fontawesome in my p:commandButton, since i was told they are supported natively by PrimeFaces and work similar to PrimeIcons icons: How its supposed to be:

icon="fa fa-iconname" -> inside CommandButton displays the icon.

here is my p:commandButton:

<p:commandButton id="myId" 
 actionListener="#{bean.myMethod}" 
 process="@this"
 icon="fa fa-road"
 style="height: 2.357rem;
 width: 2.357rem;
 margin-right: 1rem;
 margin-left: 1rem;
 color: white;"
 rendered="#{bean.rendered}"
 disabled="#{!bean.disabled}"
 update="main-form:tabView"
 > 
 <p:confirm message="confirm"/>
 <f:setPropertyActionListener value="#{property}" 
 target="#{bean.myTarget}" />
</p:commandButton>

thanks!

Answer 1

It does work but a few things to check.

1. Did you include FontAwesome in your pom.xml?

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

2. Did you include FontAwesome on your page or template.xhtml?

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

1. Did you include the mime types in your web.xml

<mime-mapping>
 <extension>ttf</extension>
 <mime-type>application/font-sfnt</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>woff</extension>
 <mime-type>application/font-woff</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>woff2</extension>
 <mime-type>application/font-woff2</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>eot</extension>
 <mime-type>application/vnd.ms-fontobject</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>eot?#iefix</extension>
 <mime-type>application/vnd.ms-fontobject</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>svg</extension>
 <mime-type>image/svg+xml</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>svg#exosemibold</extension>
 <mime-type>image/svg+xml</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>svg#exobolditalic</extension>
 <mime-type>image/svg+xml</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>svg#exomedium</extension>
 <mime-type>image/svg+xml</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>svg#exoregular</extension>
 <mime-type>image/svg+xml</mime-type>
 </mime-mapping>
 <mime-mapping>
 <extension>svg#fontawesomeregular</extension>
 <mime-type>image/svg+xml</mime-type>
 </mime-mapping>