Search code examples
cssjsfjsf-2primefacesfont-awesome

PrimeFaces icons not render on the commandButton

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
Solution

  • 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;
}