Using FontAwesome 5.x with PrimeFaces 6.2+

Question

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

Hi I want to use the new icons of https://fontawesome.com/changelog/latest 5.5 version

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>

in my web.xml file

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

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

Note: I'm using fas and fa, but neither is working

Like shown my image all icons are failing

How solve this?

Start by removing the PrimeFaces related FontAwesome config from the web.xml, make an example without a template and check the results — Kukeltje, Dec 14 '18 at 15:47
Then remove it from the question, it is not related/relevant... and please make a [mcve]... — Kukeltje, Dec 14 '18 at 19:44
I put here in the question, because I following the another answer where it is used, And I was testing `primefaces.FONT_AWESOME` with `false` value. Like in related questions, not all code is needed. — , Dec 14 '18 at 20:18
Code that is not needed should not be in the question. It can confuse people and have them spend time on irrelevant comments. — Kukeltje, Dec 15 '18 at 07:54

Melloware · Accepted Answer · 2019-05-13T19:06:04.510

8

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.

edited May 13 '19 at 19:06

answered Dec 16 '18 at 13:40

Melloware

10,435
2
32
62

I thought I read somehwere (and hoped) PF was/is dropping the built-in support for FA and instead would suggest using the webjars solution – Kukeltje Dec 16 '18 at 13:43
You are correct in future versions they are dropping it in support of WebJars but those styles were adding right now if people wanted to start using FA 5 in their projects. – Melloware Dec 17 '18 at 12:07
This is just a useless comment to say that the solution above worked, since it has no feedback. I'm using primefaces 6.1 and FA 5 still worked. – Dalton Feb 02 '19 at 15:35
Unfortunately, changing according to this answer, is not working for me. I thought `name="font-awesome/VERSION_FONT_AWESOME/css/all.min-jsf.css"` must be according to declared in *pom.xml* `font-awesome VERSION_FONT_AWESOME` – Feb 07 '19 at 14:39
When the *web.xml* is changed to `primefaces.FONT_AWESOME false` all icon are not shown. but `primefaces.FONT_AWESOME true` only old icons are shown! – Feb 07 '19 at 15:10
1

When you uprgade to fontawesome 5.5 not all icons are "fa XXX" anymore some are now "fas XXX" and FAR, FAL, FAB. See this page: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use – Melloware Feb 07 '19 at 22:44
there's a open fork too: https://github.com/ForkAwesome/Fork-Awesome – erickdeoliveiraleal Apr 08 '20 at 18:32

Using FontAwesome 5.x with PrimeFaces 6.2+

1 Answers1

Linked