3

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

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

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

最好的祝福，

4

2 回答 2

5

您需要定义自己的 css 类：

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

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

<p:commandButton icon="img-button-help" />
于 2012-06-20T13:23:08.643 回答
1

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

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

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

    .uipencil-icon { 

    width: 16px; 

    height: 16px;

    align:up;

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

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

  1. 然后您可以将定义的图标与命令按钮一起使用
<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 以获取命令按钮上的图像:)

于 2017-04-06T08:04:45.367 回答