How to add background image and icon to a JSF button?

[ashishagw]

am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.

My Requirement is:- JSF button with Background image and a Icon

Following code am using to add background.

  <!-- Discard button-->

<h:commandButton action="discard"  style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; "  value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>

I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.

Can somebody help me in adding a icon to the button too please.

[sunkaram]

did you try 'image' property of <h:commandButton ?


[ashishagw]

Hey Sunkara,

I treid but the image is coming as background image, but I want to to have a image as background and other image as icon.

[vi_mahe_ka1]

try this

<button type="button">
<a4j:support event="onclick" action="..." reRender="..."></a4j:support>
<h:graphicImage value="/pages/tennessee.gif"></h:graphicImage>

<h:outputText value="test"></h:outputText>
<h:graphicImage value="/pages/texas.gif"></h:graphicImage>
</button>

<a4j:commandButton type="image"
     image="/images/icons/copy.gif" align="left">Save</a4j:commandButton>

[liuliu]

hi,

i think you cant get what you want just with css. primefaces has a component imagebutton, it works fine with RF.

liu

[josh68]

Just a note that in my project, <a4j:commandButton type="image" image="path to image" /> works, but only if you do not use a JSF2-type resource identifier for the image attribute (eg, image="#{resource['images:my_custom_image.gif']}"). For some reason, when I try that, the resulting path contains a doubled root (eg, "/myApp/myApp/faces/javax.faces.resource/my_custom_image.gif?ln=images"). I use JSF2-type resource identifiers all over my application, and this is the only place it fails to work correctly. So, instead, I have to use a relative path (eg, image="../../resources/images/my_custom_image.gif").

Seems like this may be a bug in RF 4.x. I'm using 4.2.

Thanks.

[healeyb]

It's just so much easier to use:

<..:commandLink>

   <h:graphicImage .../>

</...:commandLink>

I can't think of any real difference in what it does.

Regards,

Brendan.

---

Freelance Java Enterprise Developer

JSF Richfaces Ajax Java 6/7 (scjp) EE 6 HTML CSS JavaScript jQuery MySQL JPA Hibernate Eclipselink

Spring Oracle SQL JPQL Sybase EJB CDI Glassfish Apache JAX-RS Primefaces UNIX Paypal and more..