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

但是网页中的菜单项是这样的：

我做错了什么？

Answer 1

终于对我有用了：

css代码：

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

图标位置文件如下： rootFolder/src/main/webapp/resources/icons/espaniol.png

在 xml 文件中：

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

注意： in css 必须以 fa 开头，否则将不起作用

p:menuitem 图标自定义

p:menuitem icon customization

icons

menuitem

primefaces