commanbutton 中的 Primefaces 自定义图标答案

【问题标题】：Primefaces Custom icon in commanbuttoncommanbutton 中的 Primefaces 自定义图标
【发布时间】：2014-02-11 12:07:16
【问题描述】：

我想要一个 PNG 文件 (26*26px) 作为我的 Primefaces 按钮的背景。

这是我的 CSS 类

.btnCreate {
border-radius: 0px;
background-image: url("#{resource['images/create.png']}") !important;
width: 26px;
height: 26px;
}

这就是按钮

<p:commandButton icon="btnCreate" title="Icon Only" />

结果如下：

outcome

如何将图像放置在按钮的中间？

Edit2：正如一些人建议的那样，我尝试更改值 @background-position 但这也无济于事，因为它只是剪切图像并仅显示右边框或左边框

outcome after back-position:-10px-10

【问题讨论】：

这样使用
@Sushan 这不是普通的 html，他使用 jsf 和 primefaces
@Theo 肯定会发生这种情况，因为你说你的图片是 26*26px 如果你现在减去 10px 你会得到那个结果。我更新了我的帖子，请重试

标签： css jsf primefaces

【解决方案1】：

只需使用background-position：

.btnCreate {
  border-radius: 0px;
  background-image: url("#{resource['images/create.png']}") !important;
  width: 26px;
  height: 26px;
  background-position: -10px -10px;
}

编辑： 这里有完整的例子：

首先创建只有图标的按钮：

<p:commandButton icon="btnCreate" title="Icon Only"  styleClass="iconOnlyButton"/>

现在，为仅带有图标的按钮定义样式：

.iconOnlyButton{
    background: transparent !important;
    border: none !important;
    margin: 0;
}

和图标：

.btnCreate {
    background-image: url("#{resource['images/create.png']}") !important;
    width: 26px;
    height: 26px;
    background-position: 0px 0px;
}

将border、background-color 等按钮的样式添加到 CSS 中的 iconOnlyButton 类。在 btnCreate 中只保留图像的属性。您可以在任何现代浏览器（如 Chrome 或 Firefox）中即时调整 background-position

【讨论】：

我编辑了我的答案 - 我相信它现在解释得更多了。
edit2：谢谢，我想我越来越近了this is what I get now
尝试使用background-position - 例如-3px -3px;

【解决方案2】：

这里有一些花哨的东西，可以试试

    <p:commandButton icon="btnCreate" title="Icon Only"
        styleClass="btnCreate" style="width:26px; height:26px" />

CSS：

.btnCreate { 边界半径：0px;背景：网址（资源/图像/create.png）；不重复！重要；背景位置：0 0！重要；边框：0px； }

现在为 3.5 岁以下的我工作

【讨论】：

它保持不变......我试着玩弄背景位置，但它并没有真正帮助，它只是削减了我的形象
@theo 你在 backgroundposition 之后使用了 !important 吗？
是的...还是一样的:(
我可以在 imgur 上发布 png，您可以自己尝试一下：) here you go 并感谢您的帮助
您使用的是什么版本的 primefaces？在我的版本上它工作正常