Fontawesome with Primefaces

FontAwesome with PrimeFaces

The ^ can be removed with

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
}

Using FontAwesome 5.x with PrimeFaces 6.2+

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/c28c0bccc615bffb99c30825c8c7d8084c3a72da

Turn default PF support OFF in web.xml:

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

Update your pom.xml.

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

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

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.

Change icon from jQuery UI to FontAwesome in PrimeFaces

Try my FontAwesomeResourceHandler.

This resource handler will strip the jQuery UI icons from the community PrimeFaces themes and adds FontAwesome rules to
the theme. You can use it on existing applications without needing to convert all XHTML (for example ui-icon-gear to
fa fa-cog). The injected CSS will map all the UI icons.

Add this dependency to your pom.xml:

<dependency>
  <groupId>com.github.jepsar</groupId>
  <artifactId>primefaces-theme-jepsar</artifactId>
  <version>0.9.1</version>
</dependency>

Then, in the faces-config.xml, add the handler:

<application>
  <resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler>
</application>

---

Related Topics