commandLink with specific icon size Primefaces/jsf

Question

I'm trying to set an specific size for my icons because the predefined is seted to 16x16 and is to small, but this no work.

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

CSS:

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

Version:

Primefaces 5.1

Answer 1

You can use graphicImage between .

Try this:

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

Answer 2

There seems to be no way of giving a CSS style directly to the icon you specified. But you may achieve what you are trying to do using your own image with the following style:

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

Answer 3

Primefaces uses his own sprite for the icons:

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

You can't set the size of the icon image on this case because is an sprite.

You need your own sprite with your predefined icons and sizes.

Example:

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"/>

Another solution is use a separated image for every commandLink and set the size what you want. The other solutions explains this.