PrimeFaces：我怎么可以利用定制的图标？(PrimeFaces: how can I mak

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:

创建你自己的（用户自定义/自定义）的UI图标在JSF primefaces请按照下列步骤操作：

1. 我的形象的名字叫“pencilfour.png”，将其放在资源文件夹中的Web应用程序。

2. 在您的XHTML页面的“风格”标签内的一个新的名称来定义自己的图标：

   .uipencil图标{

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

你可以修改与和高度按您的要求。

3. 然后你可以使用已定义的图标，命令按钮

 <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: how can I make use of customized icons?