Arquivo Discussoes de Programacao e Tecnologia 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"/>
<p:button value=“Confirmar” style=“width:120px;” image=“imagemConfirmar”/>
É pq o “image” não é estilo, mas sim o arquivo em si.
<p:button value=“Confirmar” style=“width:120px;” image=“imagemConfirmar”/>É pq o “image” não é estilo, mas sim o arquivo em si.
Mas estou tentando isto e também não funciona:
<p:button value="Confirmar"
style="width:120px;"
image="resources/images/confirmar.png"/>
Tenta com “/resources/images/confirmar.png”.
Esse trem de página é uma chatisse mesmo.
Tenta com “/resources/images/confirmar.png”.Esse trem de página é uma chatisse mesmo.
Não funciona, já tentei todas as combinações possíveis e imagináveis de caminho e não funciona.
Coloque assim:
.ui-state-default .imagemConfirmar {
background-image: url("resources/images/confirmar.png");
}
Coloque assim:
.ui-state-default .imagemConfirmar { background-image: url("resources/images/confirmar.png"); }
Granella, muito obrigado, funcionou. De onde você tirou isto? Olha o exemplo da própria documentação do Primefaces:
<p:button outcome="target" image="star" value="With Icon"/>
.star {
background-image: url("images/star.png");
}
Coloque assim:.ui-state-default .imagemConfirmar { background-image: url("resources/images/confirmar.png"); }Granella, muito obrigado, funcionou. De onde você tirou isto? Olha o exemplo da própria documentação do Primefaces:
<p:button outcome="target" image="star" value="With Icon"/> .star { background-image: url("images/star.png"); }
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: