Custom Primefaces icon

Goal

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

Description

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

Explanations

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

menubar_with_icons

Advertisements

One comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s