p：menuitem图标自定义

Question

我想在菜单项中放置一个像图标一样的png图像文件。

我建议的代码是：

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

css文件位于：src / main / webapp / resources / css / icons.css

在template.xhtml中我添加了一行：

<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 /主/ web应用/资源/图标/ espaniol.png

并在xtml文件中：

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

注意：css中的必须以fa开头，否则无效