1

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

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

主题.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>
4

1 回答 1

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

于 2013-05-17T19:34:35.013 回答