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

Question

我正在使用JSF 2.0
我可以将背景图像添加到JSF按钮，但无法向按钮添加图标。

我的要求是： - 带背景图片和图标的JSF按钮

以下代码用于添加背景。

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

也可以帮助我为按钮添加图标。
我正在更新一个图像，以便更好地解释我想要实现的目标，以及我迄今为止用上面的代码实现的目标。

Answer 1

所以你想要一个带有两个背景图像的按钮？这在单个HTML元素上是不可能的。 <h:commandButton>生成一个HTML <input type="submit">元素，而您基本上需要<button type="submit" class="background"><span class="icon">。您需要创建一个完全生成该HTML的自定义组件，或者采用第三方组件库，该库在其集合中具有此类组件，例如PrimeFaces。另请参阅the <p:commandButton> showcase。