JSF Primefaces ConfirmDialog

Question

我正在改进/抛光我的primefaces ConfirmDialog，但我似乎不能在它上面放一些漂亮的图像或改进它的一些外观。另外我似乎找不到一些关于如何使用它的属性的文档，我已经下载了primefaces用户手册，但它似乎缺少一些东西。 这是我的代码。

<p:confirmDialog header="Confirm" severity="alert" closeOnEscape="true" widgetVar="confirmationDialog" showEffect="fold" > 
    <f:facet name="message"> 
      <h:outputText value="Are you sure all details 
          are correct and proceed in creating the Account?" />   
    </f:facet> 
    <p:commandButton value="Yes" actionListener="#{marketingPersonController.create}" 
        oncomplete="confirmationDialog.hide()" icon="ui-icon-check" 
        update="propertyPanel accountPanel marketingPersonPanel"> 
     <f:ajax rendered="propertyPanel accountPanel marketingPersonPanel"/> 
    </p:commandButton> 

    <p:commandButton value="No" onclick="confirmationDialog.hide()" type="button" 
        icon="ui-icon-close"/> 
</p:confirmDialog> 

下面是截图

我似乎无法去掉小！图标在那里，如果我把严重性没有，它仍然显示一个奇怪的“^”图像。我想彻底改变图标并以某种方式修改它的一些外观。

此外，我试过有这个CSS。仍然没有工作。

.ui-dialog-content p span { 
      background-image: url('path to image here') 
       no-repeat !important; 
    } 

我做错了什么？如果你有一个完整的primefaces文档，这也会有所帮助。由于

Answer 1

你有2种可能：

您可以直接更换图标重写Primefaces CSS是这样的：

CSS

.ui-icon.ui-confirm-dialog-severity { 
    background-position: 0 0 !important; 
    background-image: url('PATH TO IMAGE HERE') !important; 
} 

或者你可以做这样的：内部触发对话的组件：

XHTML

<p:confirm header="HEADER" message="MESSAGE" icon="ui-icon-alert" /> 

例子这里：http://www.primefaces.org/showcase/ui/confirmDialog.jsf

CSS

.ui-icon.ui-confirm-dialog-severity.ui-icon-alert { 
    background-position: 0 0 !important; 
    background-image: url('PATH TO IMAGE HERE') !important; 
}