PrimeFaces：如何使用自定義圖標？

Question

PrimeFaces提供了很多來自jQuery themeroller的圖標。他們很有用，但我需要爲我的應用程序定製一些圖標。假設我有一個<p:commandButton>：

<p:commandButton icon="ui-icon ui-icon-check" /> 

由於我的CSS知識是非常有限的，我會很感激，如果你能告訴我，我怎麼可以把一些自定義圖標到按鈕上方的標籤。

最好的問候，

Answer 1

您需要定義自己的CSS類：

.img-button-help { background-image: url('../images/help.png') !important; } 

，然後在你的p:commandButton使用這個類：

<p:commandButton icon="img-button-help" /> 

Answer 2

創建自己的（用戶自定義/定製）在jsf primefaces中的ui-icon遵循這些步驟：

1. 我的圖像名稱是「pencilfour.png」，放在webapp的資源文件夾中。

2. 使用新的名稱定義自己的圖標 裏面的 「風格」 的標籤在你的XHTML頁面：

   .uipencil圖標{

   width: 16px; 
   
       height: 16px; 
   
       align:up; 
   
       background-image: url(#{resource['img:pencilfour.png']})!important ; 
   } 
   

你可以修改和高度根據您的要求。

然後可以使用所定義的圖標與所述命令按鈕

<p:commandButton 

icon="uipencil-icon" 

    style=" vertical-align:middle; 

    margin-right:10px; 

    height:19px; 

    width:19px;" 

    </p:commandButton> 

這將工作，採取約護理的唯一事情是提供正確url: url(#{resource['img:pencilfour.png']})!important ; url的語法是imp來獲取命令按鈕上的圖像:)