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来获取命令按钮上的图像:)