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遵循以下步骤：

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

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

.uipencil-icon {

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的语法是在命令按钮上获取图像：）

PrimeFaces：我如何使用自定义图标？

2 个答案: