具有特定图标大小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使用一个单独的图像，并设置您想要的大小。 其他解决方案解释了这一点