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; 
}