Agregue una imagen o ícono a la cabecera de la pestaña Primefaces

Question

Estoy tratando de usar una imagen/icono en un encabezado de tabulación en lugar de título de texto (o puedo usar ambos), estaba probando usando titleStyleClass marcando un fondo de imagen pero no funciona

pestaña

mis PrimeFaces:

<p:tab titleStyleClass="tCliente" title="Vehiculo"> 

Mi estilo CSS

.tCliente 

{  
    background-image: url(../images/logo_tropidatos.gif); 
} 

Gracias por su ayuda: D

Answer 1

En PrimeFaces 3.0 y posteriores puede agregar una faceta para anular el título de fichas:

<p:tabView> 
    <p:tab> 
     <!-- overrides title on tab--> 
     <f:facet name="title"> 
       <h:outputText value="tab title"/> 
       <p:graphicImage value="/resources/images/icon.png"/> 
      </f:facet> 

     <h:panelGrid> 
      <!-- tab content --> 
     </h:panelGrid> 
    </p:tab>  
</p:tabView> 

espero que ayude.

Answer 2

intento de añadir display:inline-block;

Answer 3

se debería poner:

background-image: url("../images/logo_tropidatos.gif") !important;

pero después de eso tengo un problema: la repetición de imagen en la cabecera. Traté de resolver agregando background-repeat:no-repeat; pero es lo mismo ... ¿alguien puede ayudar?

Answer 4

tratan de esta manera

background-image: url("../images/logo_tropidatos.gif") !important; 
background-repeat:no-repeat !important;