具有特定图标大小Primefaces / jsf的commandLink

Question

我正在尝试为我的图标设置一个特定尺寸，因为预定义版本设置为16x16并且很小，但这不起作用。

<p:commandLink id="trash" styleClass="ui-icon ui-icon-trash myIconsSize"/>

CSS：

.myIconsSize {
width:32px;
height:32px;
}

版本：

Primefaces 5.1

Answer 1

您可以在。之间使用 graphicImage 。

试试这个：

<p:commandLink id="trash">
    <h:graphicImage name="images/your_image.jpg" width="32" height="32"/>
</p:commandLink>

Answer 2

似乎无法直接为您指定的图标提供CSS样式。但是您可以使用以下样式的自己的图像来实现您想要做的事情：

.myIconsSize {
       background-image: url("images/your-own-image.png");
}

Answer 3

Primefaces将自己的精灵用于图标：

primefaces-5.1.jar
META-INF/resources/primefaces-aristo/images/ui-icons_616161_256x240.png

你不能在这种情况下设置图标图像的大小，因为它是一个精灵。

你需要自己的精灵与预定义的图标和大小。

示例：

CSS：

.si-icon-16x16 {
width: 16px;
height: 16px;
background-image: url('../images/sprites/sprite.png');
background-repeat: no-repeat;
display: block;
overflow: hidden;
text-indent: -99999px;
}

/*your icon position on the sprite*/
.si-icon-send {
background-position: -20px -328px;
}

JSF：

<p:commandLink id="send" styleClass="si-icon-16x16 si-icon-send"/>

另一个解决方案是为每个commandLink使用一个单独的图像，并根据需要设置大小。其他解决方案解释了这一点。