Мои собственные primefaces P: значок commanButton

Я не могу использовать свой собственный значок для primefaces p: commandButton. Мой код:

    <p:commandButton value="Cancel" action="#{userBb.cancel()}" 
       icon="ui-icon-myCancel" />

css это:

.ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

структура папок обычных: /resources/images/cancel_16.png

в результате я получаю: enter image description here

когда я пытаюсь:

.ui-state-default .ui-icon .ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

Я:enter image description here

когда я смотрю на отчет firebug, есть раздел span

<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span>

есть:

.ui-state-default .ui-icon {
    background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");

Я посмотрел на это объяснение, и другие не нашли ответа.

когда я пытаюсь p: commandLink с H: graphicImage значок виден, но это изображение как кнопка/ссылка.

7
commandbutton jsf primefaces

2 ответов

Zbyszek, это шаги, которые я предпринял, чтобы получить результат ниже. Основываясь на вашем комментарии, я предполагаю, что это то, что вам нужно.

commandButton with value and icon

Примечание: моя фотография была test.jpg и это было в следующем каталоге resources/images/test.jpg. Также предоставленное вами правило стиля было помещено в resources/css/style.css. Размер изображения 25 х 17 (но я сомневаюсь, что это важно. Я просто говорю это, если вы думаете, что значок слишком мал).

In <h:head> убедитесь, что у вас есть (возможно, вы забыли добавить это, и стили не применялись ?)

<h:outputStylesheet name="css/style.css" />

мой p:commandButton> (менять по мере необходимости, это был просто быстрый макет) 

<p:commandButton value="Cancel" icon="ui-icon-myCancel" />

и правила 

.ui-icon-myCancel{
    background-image: url("#{resource['images/test.jpg']}") !important;
}
14

эта простая версия url () также работает на Primefaces 6.1:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(Если вы поместите файл значка в папку web/img, а файл css находится в веб-папке)

Но это!--7-->закругляем углы значка, поэтому я использую это решение:

.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;  
                  border-radius: 0px!important;}
1