#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, иначе это не сработает
Комментарии:
1. разве вы не можете просто использовать атрибут ‘class’ в меню вместо значка?