Accessing images with CSS url() in Primefaces

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.

Simple solution:

IF you are using JavaServer Faces 2.0 you have chance to put all resources inside specially designed directory. So you need to have this folder structure in web app:

-rootdir
--resources
---images
----disk.png

And to receive image in css background you should type something like this:

.disk {
background: url(#{resource['images/disk.png']}) !important;
}

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?

I faced the same problem for a moment and I reckon documentation about it is unclear! It works this way for Primefaces commandButton and similar (menuItem, submenu, etc):

What I did is:

• Download a theme from the theme library in PrimeFaces website (example: aristo or redmond).
• Unzip the archive to your web application resources folder, (in my case: root/resources/css/aristo
• Notice that in aristo folder you have : theme.css and /images folder where an indexed png image contains all the icons used by the theme.
• If you open the theme.css you'll notice that to access an indexed image icon you should call two classes : .ui-icon and .ui-icon-theiconyouwant (the .ui-icon retrieves the index png using #{resource['primefaces.......png']} and .ui-icon-agivenicon delimit the icon by its X & Y position (index) in the png image).
• Now output the theme.css into you application, by using **<h:outputStyleSheet />**. Best way to do it is between tags of your template.
• So in your xhtml or jsp, do **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Now if you want to add your personal images to use with a <p:commandButton, create classes in theme.css :

  .smiley { background-image: url("#{resource['images/smiley.png']}") !important; /this will be ignored by Internet Explorer if not compatible/ width: 16px; height: 16px; }

  Normally JSF accesses the first images folder available within your resources folder.

• Now do: <p:commandButton image="smiley" value="Smile" />