In order to apply the custom icons to your web page, we first need to copy the generated image sprite file and then add the generated CSS classes from the previous section.
The following generated sprite file has to be added to the images folder of the primefaces-moodyBlue2 custom theme. Let's name the file ui-custom-icons:
After this, copy the generated CSS rules from the previous section.
The first CSS class (ui-icon) contains the image sprite to display custom icons using the background URL property and dimensions such as the width and height properties for each icon. But since we are going to add the image reference in widget state style classes, you need to remove the background image URL property from the ui-icon class. Hence, the ui-icon class contains only the width and height dimensions:
.ui-icon {
width: 16px;
height: 16px;
}Later, modify the icon-specific CSS class names as shown in the following format. Each icon has its own icon name:
.ui-icon...