Custom Primefaces icon


Create a new Primefaces icon to be presented in a component such as a a MenuItem


The solution has been reported in Stackoverflow and it consists basically on a CSS class definition and the selection of an image containing the icon that will be referred in the CSS class.

How to

Create or choose an image with the appropriate dimensions to be referred in the Primefaces menu component and name it, for instance, cvmanager.png (in this particular case, the image was created as a square sized 25px – the same size of the CSS class definition we will create).

Next, we define the CSS class referring the image and setting its dimensions:

.ui-icon.cvmanager-icon {
  background: url("#{resource['cvmanager:images/cvmanager.png']}") no-repeat;
  height: 25px;
  width: 25px;

And finally we use the new CSS class definition:

<p:menuItem icon="cvmanager-icon" ... />


Not much to say here as all explanations were made in place but I end this recipe of an image showing its result:



One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s