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 w

Answer 1

try this way

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

Answer 2

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 3

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 4

try adding display:inline-block;