GeeCON Prague 2014*
The moose likes JSF and the fly likes How insert image to primefaces commandbutton? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Java » JSF
Bookmark "How insert image to primefaces commandbutton?" Watch "How insert image to primefaces commandbutton?" New topic
Author

How insert image to primefaces commandbutton?

D. Formenton
Ranch Hand

Joined: Mar 20, 2008
Posts: 47
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>
<hutputStylesheet name="css/jsfcrud.css"/>
<hutputStylesheet 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
Greenhorn

Joined: Nov 20, 2011
Posts: 1
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


XHTML


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.
 
GeeCON Prague 2014
 
subject: How insert image to primefaces commandbutton?