p：menuitemアイコンのカスタマイズ

Question

アイコンのようなpng画像ファイルをメニュー項目に入れたいと思います。

私が提案するコードは次のとおりです。

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

CSSファイルは次の場所にあります。のtemplate.xhtmlではsrc /メイン/ webappの/リソース/ CSS/icons.css

私は行を追加します。

<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; 
} 

ウェブページのmenuitemは次のようなものです：

私は間違っていますか？

Answer 1

は、最後にそれが私の作品：

CSSコード：

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

アイコンの場所のファイルは同様です： rootFolder/srcに/メイン/ webappの/リソース/アイコン/ espaniol.png

xxxファイル内：

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

注：はCSSで始まる必要があります。それ以外の場合は動作しません。