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

【问题标题】：How to add background image and icon to a JSF button?如何将背景图像和图标添加到 JSF 按钮？
【发布时间】：2012-02-16 10:10:41
【问题描述】：

我正在使用 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>

有人可以帮我在按钮上添加一个图标吗？
我正在更新一张图片，以便更好地解释我想要实现的目标，以及我到目前为止使用上面的代码所实现的目标。

【问题讨论】：

标签： css jsf-2 background-image

【解决方案1】：

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

【讨论】：

Hey BalusC：我猜你误解了这个问题，或者可能是我的构图能力很差。为了更好地解释，我附上了图片。我希望你能以更好的方式帮助我。急切地寻找答复。
leftMenuActiveBg.png 究竟包含什么？它包含图标，对吧？
不，它包含背景图像，蓝色的。现在，我需要添加图标。背景图片和图标是两个不同的图片。
我们能不能在 Richfaces 中实现同样的效果，非常重要，请指导。
不，它没有这样的组件。重要性与我无关，请不要给志愿者施加压力，这很粗鲁。