Thursday, January 24, 2013

How to change icon for Primefaces tree

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.
icon for Primefaces tree

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.
Change icon for Primefaces tree - styleClass
    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 />
How to change icon for Primefaces tree

Done!!

2 comments:

  1. It worked.. its applicaple to all elements that has icon property. Thanks a lot!

    ReplyDelete
  2. You 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

LinkWithin

Related Posts Plugin for WordPress, Blogger...