Colocar ícone em botão

Front-end
#1

Não estou conseguindo colocar um ícone em um botão.

Criei o estilo:

<style type="text/css">
      .imagemConfirmar {
             background-image: url("resources/images/confirmar.png");
      }
</style>

E fiz o botão do PrimeFaces:

<p:button value="Confirmar" style="width:120px;" image="imagemConfirmar"/>

Mas o ícone não aparece no botão. Usando o componente baixo o ícone aparece normalmente:

<h:graphicImage url="resources/images/confirmar.png"/>
#2

<p:button value=“Confirmar” style=“width:120px;” image=“imagemConfirmar”/>

É pq o “image” não é estilo, mas sim o arquivo em si.

#3

[quote=jakefrog]<p:button value=“Confirmar” style=“width:120px;” image=“imagemConfirmar”/>

É pq o “image” não é estilo, mas sim o arquivo em si.[/quote]

Mas estou tentando isto e também não funciona:

<p:button value="Confirmar" 
    style="width:120px;"
    image="resources/images/confirmar.png"/>
#4

Tenta com “/resources/images/confirmar.png”.

Esse trem de página é uma chatisse mesmo.

#5

[quote=jakefrog]Tenta com “/resources/images/confirmar.png”.

Esse trem de página é uma chatisse mesmo.[/quote]

Não funciona, já tentei todas as combinações possíveis e imagináveis de caminho e não funciona.

#6

Coloque assim:

.ui-state-default .imagemConfirmar {  
    background-image: url("resources/images/confirmar.png");  
}
#7

[quote=Granella]Coloque assim:

.ui-state-default .imagemConfirmar { background-image: url("resources/images/confirmar.png"); } [/quote]

Granella, muito obrigado, funcionou. De onde você tirou isto? Olha o exemplo da própria documentação do Primefaces:

&lt;p:button outcome="target" image="star" value="With Icon"/&gt;

.star {
background-image: url("images/star.png");
}
#8

[quote=eliflavio][quote=Granella]Coloque assim:

.ui-state-default .imagemConfirmar { background-image: url("resources/images/confirmar.png"); } [/quote]

Granella, muito obrigado, funcionou. De onde você tirou isto? Olha o exemplo da própria documentação do Primefaces:

[code]
<p:button outcome=“target” image=“star” value=“With Icon”/>

.star {
background-image: url(“images/star.png”);
}
[/code][/quote]

O Primefaces usa o padrão dos temas do jQuery UI, com isso você tem que modificar algumas classes css default do tema que esta usando para fazer essas personalizações. Para saber o que adicionar nas classes css utilizo o “inspect element” do Chrome para ver o que devo adicionar, pode usar também o Firebug.

Ja sofri com isso porque tive que personalizar o tema das mensagens do primefaces modificando cores e imagens :lol:

#9