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

do the icons not render in general or not on the commandButton? Any network 404's? — Kukeltje, Feb 23 '15 at 12:20
Problem can also be solved by adding `.ui-icon { text-indent: 0; }` — Kukeltje, Feb 23 '15 at 14:36
Strange, works for me… check with your browser developer tool if there is a more specific selector that is more specific. — Kukeltje, Feb 23 '15 at 19:31

score 1 · Accepted Answer · answered Feb 23 '15 at 14:38

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

answered Feb 23 '15 at 14:38

Kukeltje

12,223
4
24
47

score 1 · Answer 2 · answered May 25 '17 at 20:29

1

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>

answered May 25 '17 at 20:29

jmoran

164
1
5

Changing the color does not make it visible (unless it is grey on grey, but that would be a more generic issue). And in my opinion, using the built-in font-awesome is not the best solution since the version of fa you can use depends on the one PF provides. Using the webjar one is 'better'. Read all answers here: https://stackoverflow.com/questions/18891768/how-to-use-font-awesome-from-webjars-org-with-jsf – Kukeltje May 25 '17 at 21:11
I was using south-street theme which is mostly green and I never thought the color could be a problem until after almost an hour trying different solutions, I could got the icon visible, changing the color. – jmoran May 25 '17 at 22:18

score 0 · Answer 3 · answered May 15 '20 at 09:36

0

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

answered May 15 '20 at 09:36

Fabio Sartor

99
3

Not the best suggestion: https://github.com/primefaces/primefaces/issues/4778 Using the webjar as OP does is the more future proof approach – Kukeltje May 15 '20 at 10:03

score 0 · Answer 4 · answered May 04 '21 at 08:04

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.

score -3 · Answer 5 · answered Apr 06 '15 at 22:03

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 ?

PrimeFaces icons not render on the commandButton

5 Answers5