如何在primefaces中创建自定义图标

Question

我想在我的p:commandButton中创建一个新图标，但我使用了这种方法失败

  

PrimeFaces: how can I make use of customized icons?

但对我没用。我会告诉你我的代码：

CSS代码：

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

jsf代码：

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

结果： 新结果 - ＆gt;

如何在Primefaces中使用自定义图标？

Answer 1

您好，您可以尝试将background-position添加到您的CSS中，因为primefaces图像基于精灵，而.img-button-help所做的是设置位置。试试这个：

.img-button-help { 
   background-image: url('img/mag.ico') !important;  
   background-position: center !important;
}

Answer 2

我找到了解决这个问题的解决办法，由Danko创作了一个小图标，我把它作为左边的背景

<p:commandButton value="test" style=" padding-left: 15px;background-image: url('img/mag.ico') !important;background-repeat: no-repeat;background-position: left;" />

现在我把它作为一个图标，使用了primefaces的图标。