with icon image not showing

问题

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>

回答1:

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,

     .ui-icon-excel {
            background: url("images/toexcel.gif")  no-repeat top left !important;;
     }

Then use your command button as shown below,

<p:commandButton type="submit"
             id="cr1001_command_toexcel"
             image="ui-icon-excel"
             action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
          </p:commandButton>

2. Use jsf h:commandButton as shown below,

<h:commandButton image="images/toexcel.gif"/>

You can ajaxify h:commandButton further

来源：https://stackoverflow.com/questions/16614443/pcommandbutton-with-icon-image-not-showing

标签

css

jsf-2

primefaces

xhtml

firebug

<p:commandButton> with icon image not showing

问题

回答1: