I have been struggling this for a while. I am using primefaces 3.5. I have a command button with icon attribute. But the image seems not showing. I am not sure if I put the image url correctly. I tried a few path. But still not working. In firebug I can see the icon.
My image residing on /BelsizeWeb/WebContent/theme/primefaces-aristo/images CSS residing on /BelsizeWeb/WebContent/theme/primefaces-aristo
theme.css
.ui-icon-excel {
background-image: url("images/toexcel.gif");
}
xhtml
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/theme/primefaces-aristo/theme.css" />
<p:commandButton type="submit"
styleClass="commandExButton_image" id="cr1001_command_toexcel"
icon="ui-icon-excel"
action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
</p:commandButton>
Icon property will work with PrimeFaces (jQuery UI's) predifinded icon's only.
To solve your requirement there are two ways.
1. Using Image of p:commandButton
Modify you css class as shown below,
Then use your command button as shown below,
2. Use jsf h:commandButton as shown below,
You can ajaxify h:commandButton further