Add an image or icon to primefaces tab header

Question

im trying to use an image /icon on a tab header instead of text title(or may using both of them), i was testing using titleStyleClass seting an image background but doesnt work

my primefaces tab:

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

My css style

 .tCliente 

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

Thanks for your help :D

Answer 1

You should put:

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

but after that i have a problem: the image repeat into the header. I tried to solve adding background-repeat:no-repeat; but is the same... can someone help?

Answer 2

On PrimeFaces 3.0 and newer you can add a facet to override title on tabs:

<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>

Hope it helps.

Answer 3

try adding display:inline-block;

Answer 4

try this way

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