p: настройка значка меню

#primefaces #icons #menuitem

#primefaces #Значки #элемент меню

Вопрос:

Я хочу поместить файл изображения 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;
}

Но элемент меню на веб-странице выглядит так :

Что я делаю не так?

1. ресурсы/иконки/eeuu.png, является ли этот путь общедоступным???

2. я думаю, что значок работает только с ui-icon , если вы хотите сделать его в виде изображения, единственным решением является использование <p:commandButton/> вместо menuitem

3. что показывает консоль вашего навигатора?

4. Консоль не показывает ничего конкретного

Ответ №1:

Наконец-то это работает для меня:

код css:

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

файлы расположения значков похожи:
Корневая папка/ src/main/webapp/ресурсы/иконки/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, иначе это не сработает