FontAwesome with PrimeFaces in JSF

Question

I tried everything. I was going threw all the postings here and tried every solution, but none of them worked.

I added this to my pom.xml:

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

I added this to my web.xml:

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

<mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>  
    <extension>otf</extension>  
    <mime-type>font/opentype</mime-type>  
</mime-mapping>      
<mime-mapping>  
    <extension>ttf</extension>  
    <mime-type>application/x-font-ttf</mime-type>  
</mime-mapping>      
<mime-mapping>  
    <extension>woff</extension>  
    <mime-type>application/x-font-woff</mime-type>  
</mime-mapping>
<mime-mapping>  
    <extension>svg</extension>  
    <mime-type>image/svg+xml</mime-type>  
</mime-mapping>

I tried it with param-value off and with param-value on. Not helping.

My xhtml:

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

I don't know if it's important where to place it. I copied it from somewhere with <head> and then the font just got fat, but the icon still not shown. Without head there is just no icon.

Here is where I try to use it in the ContextMenu:

<p:menuitem value="Editieren" update="table" icon="fa fa-edit" action="#{telefonbuchList.action}"/>

I found out that show the icon, but also the arrow appears again. — CptDayDreamer, Feb 07 '19 at 17:08
Please see my solution here: https://stackoverflow.com/questions/53782404/using-fontawesome-5-5-with-primefaces-6-2/53802722?noredirect=1#comment95950282_53802722 and your icon would be "fas fa-edit" int FA5 they changed it from "fa". — Melloware, Feb 07 '19 at 22:57
@Melloware already tried your attempt before. It does not work for me. I added somewhere at my xHTML but the icon isn't there. — CptDayDreamer, Feb 13 '19 at 15:51
@Melloware yes. My bad. I also recognized that they renamed the css files. But still no icon. Primefaces FontAwesome is set false. Is it important where i place the stylesheet? I have no ideas anymore — CptDayDreamer, Feb 14 '19 at 14:00
So I'm out of ideas what's the problem. I did everything from your solution and also tried like 10 other possible solutions. Just the one with the JS instead of stylesheet worked a bit. — CptDayDreamer, Feb 14 '19 at 14:15

score 0 · Answer 1 · answered Mar 11 '19 at 15:27

Possible Answer:

There seems to be a difference if it's <h:...> or <p:...>

because now the library worked with the comment Melloware gave:

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

BUT I had to use "fa" instead of "fas":

<p:menuitem value="Löschen" update="table" icon="fa fa-trash" action="#{telefonbuchList.deleteEntry}" />

Here I had to do "fas"

<i class="fas fa-bacon"></i>

I don't know why, but it's working with the Maven webjars dependency now like this.

FontAwesome with PrimeFaces in JSF

1 Answers1