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

【问题标题】：how to create custom icons in primefaces如何在 primefaces 中创建自定义图标
【发布时间】：2013-10-25 15:37:30
【问题描述】：

我想创建一个新图标以在我的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" />

结果：新结果 ->

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

【问题讨论】：

好像没有找到图片，所以没有图标可以显示。使用安装了 Firebug 的 Chrome 或 Firefox，按 F12 并查看是否可以在“资源”部分访问此图标。
我认为该图像已创建但未显示或适用于 p:commandbutton
你确定图片找到了吗？您是否已验证是否可以从您的网站访问？验证它的一种方法是使用我在上面的评论中解释的方法。这是 Chrome 的文档：developers.google.com/chrome-developer-tools/docs/resources
我没有在 googlebug 的图像文件夹中找到它，但是当我在 google 中写入我知道的 url 时，我可以看到图像。
那么问题是找不到图像（正如我猜测的那样）。如果您将所有资源放在resources 文件夹中会更好，如下所述：stackoverflow.com/q/11988415/1065197

标签： css jsf primefaces

【解决方案1】：

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

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

【讨论】：

也没有工作，我有一个空的地方，就像我发布的图片一样。
尝试以px为单位设置位置

【解决方案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 图标将其作为图标。

【讨论】：

最好使用 css 样式