How to make an image button in JSF

Question

I want to have a component that looks like a button, but instead of text it should contain an image. Because the standard button does not offer this functionality, I tried to u

Answer 1

If the image does not fit then add properties to a сss class:

.button {
    background: white url('button.gif') no-repeat top;
    width: 32px;   // button width
    height: 32px;  // button height
    background-size: contain;
    border: none;  // hide border of button
}

Answer 2

You could just move the div outside e.g.

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>

And style the div that way. Just make the anchor (a tag) display as a block and it should fill the whole div so it's all clickable. For example in your CSS go:

.clickAll{
  display:block;
}

Answer 3

There are a couple ways you can add an image to a commandButton:

Using the image attribute

<h:commandButton action="#{some_action}" image="button.gif" />

Absolute or relative URL of the image to be displayed for this button. If specified, this "input" element will be of type "image". Otherwise, it will be of the type specified by the "type" property with a label specified by the "value" property.

Use CSS

<h:commandButton action="#{some_action}" styleClass="button" />

.button {
    background: white url('button.gif') no-repeat top;
}

Answer 4

If you can use an icon from PrimeFaces/JSF, then there is a simple and sound solution is

<p:column>
    <p:commandButton icon="ui-icon-wrench"
     style="border-width:0;background:none;"/>
</p:column>

It may help to avoid JavaScript code in JSF.