Displaying command button with image only

Question

I am trying to display a button with image only on my page but all I see is the button with ^. Following is the code for my button:

Answer 1

Put this on your css style:

    .dolar-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}

Now you can use the icon "dolar-icon" that you defined in your css.

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>

Answer 2

The image attribute has to refer a CSS class name, not a plain CSS property. So, this should do:

<p:commandButton image="someCssClassName" /> 

with the following in your CSS:

.someCssClassName {
    background-image: url(images/title_logo.jpg)
}

Please note that I fixed the major typo in property name and also removed the leading slash from the image URL, it would otherwise be resolved relative to the site's domain root; the above expects the title_logo.jpg to be inside an /image folder which in turn is in the folder where the CSS file resides.

However, this one is less clumsy, I think:

<p:commandLink action="#{bean.submit}">
    <h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>

Answer 3

Even easier:

<p:commandButton icon="ui-icon-XXXXX">

Diferent icons you can choose: https://api.jqueryui.com/theming/icons/ and http://www.primefaces.org/showcase/ui/misc/fa.xhtml

Answer 4

I suggest to use "P:coomandLink" and "P:graphicImage" at the same time. I have created a folder under webapps, and put my jpg file under this folder. This code works fine for me. good luck.

<p:commandLink action="#{MyClass.myMethod}">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>