O'Reilly logo

PrimeFaces Theme Development by Sudheer Jonna, Andy Bailey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a set of icons of our own

In this section, we are going to discuss how to create our own icons for the PrimeFaces web application. Instead of using images, you need to use image sprites by considering the impact of application performance.

Most of the time, we might be interested in adding custom icons to UI components apart from the regular standard icon set. Generally, in order to create our own custom icons, we need to provide CSS classes with the background-image property, which is referred to the image in the theme images folder.

For example, the following commandButton components will use a custom icon:

<p:commandButton value="With Icon" icon="disk"/>
<p:commandButton icon="disk"/>

The disk icon is created by adding the .disk CSS class ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required