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

Question

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

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

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

CSS 代码：

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

jsf代码：

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

结果： 新结果->

如何在 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 的图标。