PrimeFaces icons not render on the commandButton

Question

I am trying to use a font awesome icons with JSF+PrimeFaces. I added to my pom.xml file webjars dependency:

 <groupId>org.webjars</groupId>
 <artifactId>font-awesome</artifactId>

Also I have my custom css file:

body{
    background-image: url("#{resource['images/loginBackground.jpg']}");
    background-size: 100%;
    font-family: 'Belleza', sans-serif;
    font-size: 16px;
}

I added css's resources to my page (.xhtml) in this way:

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

But unfortunately when I set icon css class in commandButton component:

<p:commandButton icon="fa fa-sign-in" id="submit" value="Login" ajax="false"/>

The icon is not display on my button.

My others settings (web.xml):

  <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>none</param-value>
    </context-param>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- MAPPING SECTION -->
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

Libraries versions:

• JSF 2.2
• PrimeFaces 5.1
• Font-Awesome 4.3.0-1

Answer 1

If you do not want to use the built-in FA version like in the answer above and you still want to use it on the commandButton, add

.ui-icon {
    text-indent: 0;
}

Answer 2

In my case, my problem was a conflict with my theme and the font color. I could solve it putting this on my .css script:

.fa-trash {
    color:grey;
}

or just

.fa {
    color:grey;
}

Additionally, if you can't see fa icons at all, then you have to put this in web.xml:

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

Answer 3

just add in web.xml code:

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

and add your commandbutton like this:

<p:commandButton icon="fa fa-fw fa-pencil" value="Update" />

take a look in www.primefaces.org/showcase/ui/misc/fa.xhtml

Answer 4

you should download primeicons project and add it to your project. primeicons project : https://github.com/primefaces/primeicons .

then add this link into your page:

<link rel="stylesheet" href="primeicons-master/primeicons.css" />

so primefaces icons will be loaded.

Answer 5

First resources file css not rendered (#{var} is stil #{var) in JSF ?,

You can use
1. Use global path
background-image: url("../resource/images/loginBackground.jpg");
in css file or evrywhere
2.
Overide css primefaces style in you jsf page.
url("#{resource['images/loginBackground.jpg']}");
3.
Change in library :)

Where exsist other ways ?