如何使用 PrimeFaces 中的自定义图标？答案

【问题标题】：How can I make use of customized icons in PrimeFaces?如何使用 PrimeFaces 中的自定义图标？
【发布时间】：2012-06-22 15:13:14
【问题描述】：

PrimeFaces 提供了很多来自 jQuery themeroller 的图标。它们很有用，但我需要为我的应用程序定制一些图标。假设我有一个<p:commandButton>：

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

由于我的 CSS 知识非常有限，如果您能告诉我如何将一些自定义图标放入上述按钮的标签中，我将不胜感激。

最好的问候，

【问题讨论】：

标签： css jsf-2 primefaces icons styling

【解决方案1】：

你需要定义自己的css类：

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

然后在你的p:commandButton 中使用这个类：

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

【讨论】：

【解决方案2】：

要在 jsf primefaces 中创建您自己的（用户定义/定制的）ui-icon，请按照以下步骤操作：

我的图片名称是“pencilfour.png”，放在 webapp 的资源文件夹中。

使用新名称定义您自己的图标在您的 xhtml 页面中的“样式”标签内：

.uipencil-icon {

width: 16px; 

    height: 16px;

    align:up;

    background-image: url(#{resource['img:pencilfour.png']})!important ; 
}

您可以根据需要修改 with 和 height。

然后你可以使用定义的图标和命令按钮

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

【讨论】：

这是怎么回事，除了“url格式”与赞成和接受的答案不同？