This post shows how to change the default icon for Primefaces tree.
From the Primefaces demo, we can see that there are attributes for us to change the opened and closed icon - expandedIcon, collapsedIcon, and also icon.
These attributes are not referring to image files. Instead, there are css classes.
Thus, we have to define css classes to overwrite the existing.
Steps:
1. declare below css classes in the application css file.
i. #{resource[....]} refers to the application resource folder.
ii. ['images:...'] refers to the images folder in resource
iii.[...:folder_opened.png] refers to the image file name.
2. use the newly declared css classes in <p:tree />
Done!!
From the Primefaces demo, we can see that there are attributes for us to change the opened and closed icon - expandedIcon, collapsedIcon, and also icon.
These attributes are not referring to image files. Instead, there are css classes.
Thus, we have to define css classes to overwrite the existing.
Steps:
1. declare below css classes in the application css file.
ii. ['images:...'] refers to the images folder in resource
iii.[...:folder_opened.png] refers to the image file name.
2. use the newly declared css classes in <p:tree />
Done!!
It worked.. its applicaple to all elements that has icon property. Thanks a lot!
ReplyDeleteYou make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. Residential Tree Services
ReplyDelete