This is from the Primefaces docs:
Button Icons
An icon on a button is displayed using
CSS and image attribute.
<p:commandButton value=”With Icon” image=”disk”/>
<p:commandButton image=”disk”/>
.disk is a simple css class with a
background property:.disk {
background-image: url(‘disk.png’) !important; }
My question is: where does this url() point to? In other words, where should I put my images so that the CSS could access it?
I’ve tried /resources, /resources/img, no luck. Yes, it was working with an absolute URL (one that includes the context path), but that makes the application not portable.
It looks like your question is more concerned with the client-side aspects of things, so even though I don’t know Primefaces, here’s a stab at answering it:
CSS paths are relative to the location of where the CSS rule is declared.
If this is in your HTML (in a <style> block), then disk.png has to be in the same directory as your file.
If this rule is in a separate CSS file, then disk.png should be in the directory where the CSS file is.
If you create a directory images, then the directory will be relative from the CSS too.
Hope this helps?