如何将背景图像和图标添加到JSF按钮？

Question

I 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> 

Can somebody help me in adding a icon to the button too please.
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.

Answer 1

So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces . See also the <p:commandButton> showcase .