Answers to: How to set icons in PrimeFaces tree nodes

Comment by A1234 on Nikel Weis's answer

A1234 — Mon, 18 Nov 2013 16:33:20 -0500

Good point! Fixed it.

I was inspired by the MethodCallbackDialog in the HtmlDialogDemos project.

Comment by Nikel Weis on Nikel Weis's answer

Nikel Weis — Mon, 18 Nov 2013 16:22:20 -0500

Better practice would be to place it within the <head>-Tag. But that should be done quickly. Glad to hear, that it helped.

Comment by A1234 on Nikel Weis's answer

A1234 — Mon, 18 Nov 2013 10:01:43 -0500

Thanks Nikel,

You saved my day! To be precise, I created a CSS file "style.css" in "<project>/webContent", with the CSS-class content you mentioned.

Then I added <h:outputstylesheet name="style.css"/> right after the <h:body> tag.

And finally, I referenced the icon resource in my <p:treenode> tag. That works.

Answer by Nikel Weis

Nikel Weis — Mon, 18 Nov 2013 09:21:06 -0500

Basically the icon attribute points to a css-class. So if you want to use custom icons you need to create a custom css-class. For example:

CSS-Class:

.customIcon {
   background: transparent url("#{resource['ivy-cms:Images/customIconImage']}") no-repeat top !important;
}

Your code:

[...]<p:treeNode icon="customIcon">[...]

The CSS-class will now reference a file that is within the CMS-Folder Images/ and point to an image with name customIconImage (doesn't matter what format). You can also set the width and height within the CSS-class to control the size of the icon via CSS, although this is not recommended because this takes up bandwith when the original sized icon is loaded and afterwards resized.

Hope this helps.