After PrimeFaces update, FontAwesome icons are not displayed on any component

Question

I updated PrimeFaces from 6.0 to 12.0.0. It was also necessary to replace PrimeFaces Layout component to PrimeFaces FlexGrid. After this changes icons are not displayed on any component.

Example:

<p:commandButton title="Wyświetl" icon="fa fa-search"  actionListener="#{myRequestBean.showRequest(res)}" />

<th align="right"><span class="ui-inputgroup-addon"><i class="fa fa-lock"></i></span> </th>

Tested on Firefox, IE, Edge the same results

Answer 1

Always follow the migration guides when you upgrade PrimeFaces.

As mentioned in the guides 8 → 10 and 10 → 11 FontAwesome has been removed in 11. This does not mean you cannot use it, it's just not bundled with PrimeFaces anymore. If you want to use it, you should load it.

See also:

• How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
• How to use Font Awesome from webjars.org with JSF

Answer 2

The simple solution:

1. download, import: font-awesome-4.3.0.jar
2. add context-param

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

3. import it to xhtml:

<h:outputStylesheet library="webjars" name="font-awesome/4.3.0/css/font-awesome-jsf.css" />