How insert image to primefaces commandbutton?

[D. Formenton]

Hi,

I have some problem to insert an image to a <p:commandButton>.

Someone can show me a complete example?

My situation is:

IDE: NetBeans 7.1
Primefaces v. 2.2.1
<project>
/web Pages/resources/css/images.css
/Web pages/resources/images/Save.png

The file images.css contains only:

.save{
background-image: url("images/Save.png") !important;
}


in the JSF page:

....
<h:head>
<title>Inserimento Persona</title>
<h:outputStylesheet name="css/jsfcrud.css"/>
<h:outputStylesheet name="css/images.css"/>
</h:head>
....
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton type="button" image="save"/>
</p:toolbarGroup>
</p:toolbar>

Where is the error(s)?

Thank you.

[Anatoly Kondratyev]

Hello, I run into the same problem and didn't find a lot workaround.

Anyway, I suggest to look through this link Changing the image of a h:commandButton using CSS

In brief, for your case:
CSS

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url(#{resource['images:Save.png']}); 
}

XHTML

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:outputStylesheet library="css" name="theme.css"  />
        <h:form>
            <p:commandButton image="ui-icon" />
            <p:commandButton styleClass="ui-icon"/>
            <h:commandButton styleClass="ui-icon"/>
        </h:form>
    </h:body>

First 2 buttons are Primefaces, the last one is not.

In output first button will be strange, with "^" symbol on it. (It is bad)
Last two will be normal, with specified image on it. The problem for primefaces button is that image will be replaced with white background when mouse is over.
At the moment I'm looking for solution to this problem. Any suggestions will be welcome)

And sorry for my English, please.