我一直在苦苦挣扎。我正在使用primefaces 3.5。我有一个带图标属性的命令按钮。但图像似乎没有显示出来。我不确定我是否正确放置了图片网址。我尝试了几条路。但仍然没有工作。在萤火虫中,我可以看到图标。
我的图片位于/ BelsizeWeb / WebContent / theme / primefaces-aristo / images 驻留在/ BelsizeWeb / WebContent / theme / primefaces-aristo
上的CSStheme.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>
答案 0 :(得分: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