<p:commandButton> 图标图像未显示答案

【问题标题】：<p:commandButton> with icon image not showing<p:commandButton> 图标图像未显示
【发布时间】：2013-05-12 22:34:27
【问题描述】：

我已经为此苦苦挣扎了一段时间。我正在使用primefaces 3.5。我有一个带有图标属性的命令按钮。但是图像似乎没有显示。我不确定我是否正确放置了图片网址。我尝试了一些路径。但仍然无法正常工作。在萤火虫中，我可以看到图标。

我的图片位于 /BelsizeWeb/WebContent/theme/primefaces-aristo/images CSS 位于 /BelsizeWeb/WebContent/theme/primefaces-aristo

theme.css

.ui-icon-excel {
    background-image: url("images/toexcel.gif");
}

xhtml

<link type="text/css" rel="stylesheet"
  href="#{request.contextPath}/theme/primefaces-aristo/theme.css" />

<p:commandButton type="submit"
                 styleClass="commandExButton_image" id="cr1001_command_toexcel"
                 icon="ui-icon-excel"
                 action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
              </p:commandButton>

【问题讨论】：

标签： css jsf-2 primefaces xhtml firebug

【解决方案1】：

Icon 属性仅适用于 PrimeFaces（jQuery UI）的预定义图标。

要解决您的要求，有两种方法。

1.使用p:commandButton的图片

如下图修改你的css类，

     .ui-icon-excel {
            background: url("images/toexcel.gif")  no-repeat top left !important;;
     }

然后使用如下所示的命令按钮，

<p:commandButton type="submit"
             id="cr1001_command_toexcel"
             image="ui-icon-excel"
             action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
          </p:commandButton>

2.如下图使用jsf h:commandButton，

<h:commandButton image="images/toexcel.gif"/>

你可以进一步 ajaxify h:commandButton

【讨论】：

感谢您的回复。我可以知道 !important 是什么意思吗？我对此感到困惑。