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 the background image property. In order to display the image, you need to provide the correct relative path of the image from the web application, as follows:
.disk {
background-image: url('disk.png') !important;
}However, as...