css - with icon image not showing

Question

我一直在努力解决这个问题。我正在使用 primefaces 3.5。我有一个带有图标属性的命令按钮。但是图像似乎没有显示。我不确定我是否正确放置了图片网址。我尝试了一些路径。但仍然没有工作。在 Firebug 中我可以看到图标。

我的图像驻留在/BelsizeWeb/WebContent/theme/primefaces-aristo/imagesCSS 驻留在/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>

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