Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

How insert image to primefaces commandbutton?

 
D. Formenton
Ranch Hand
Posts: 48
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic