p: menueitem icon customization

Question

Ich möchte ein Png-Bild-Datei wie Symbol in einem Menüelement.

Der Code, den ich vorschlage, ist:

<p:menuitem id="lang_en" value="English" icon="sertec-english-icon" 
    actionListener="#{langController.countryLocaleCodeChanged('en')}" ajax="false" /> 

Die CSS-Datei befindet sich in: src/main/webapp/resources/css/icons.css

In template.xhtml füge ich die Zeile:

<h:outputStylesheet name="icons.css" library="css" /> 

icons.css:

.sertec-english-icon { 
    background-image: url("resources/icons/eeuu.png") no-repeat !important; 
    width:20px; 
    height:16px; 
} 

Aber der Menüeintrag in der Webseite ist wie:

Was mache ich falsch?

Answer 1

Schließlich funktioniert es für mich:

CSS-Code:

.fa-sertec-spanish-icon { 
    background: url("#{resource['icons/espaniol.png']}") no-repeat !important; 
    width:20px !important; 
     height:16px !important; 
} 

icon Standort-Dateien sind wie: rootFolder/src/main/webapp/resources/icons/espaniol.png

und in XTML Datei:

<p:menuitem id="lang_es" value="Español" icon="fa fa-sertec-spanish-icon" actionListener="#{langController.countryLocaleCodeChanged('es')}" ajax="false" /> 

HINWEIS: in css muss mit fa beginnen, sonst wird es nicht funktionieren