Question

我一直在苦苦挣扎。我正在使用primefaces 3.5。我有一个带图标属性的命令按钮。但图像似乎没有显示出来。我不确定我是否正确放置了图片网址。我尝试了几条路。但仍然没有工作。在萤火虫中，我可以看到图标。

我的图片位于/ BelsizeWeb / WebContent / theme / primefaces-aristo / images 驻留在/ BelsizeWeb / WebContent / theme / primefaces-aristo

上的CSS

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>

Answer 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

<p：commandbutton>图标图像未显示</p：commandbutton>

1 个答案: