css - 如何将背景图像和图标添加到 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 的自定义组件，或者采用在其集合中包含此类组件的第 3 方组件库，例如 PrimeFaces .另见 the <p:commandButton> showcase .