ui-icons not displaying on custom primefaces theme

Question

I have created a custom theme using JqueryUI ThemeRoller, then I converted it into a jar file, installed in my maven repositoty and appointed it into my jsf 2.2 project just as described on primefaces documentation. Actually everything works fine but the ui-icons that won't show..

Anyone have any clue of what's happening?

Answer 1

I had the same problem.

I resoved it comparing how PrimeFaces themes are defined. jQuery themes created with ThemeRoller imports the icons that way:

.ui-icon { width: 16px; height: 16px; background-image: url("images/ui-icons_626262_256x240.png"); 

You have to replace it with:

.ui-icon { width: 16px; height: 16px; background-image: url("#{resource['primefaces-YOUR-THEME-NAME:images/ui-icons_626262_256x240.png']}");}</b>

Do it also for the other CSS classes:

.ui-icon 
.ui-widget-content .ui-icon 
.ui-widget-header .ui-icon 
.ui-state-default .ui-icon 
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon 
.ui-state-active .ui-icon 
.ui-state-highlight .ui-icon
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon