将图像或图标添加到 primefaces 选项卡标题

Question

我试图在选项卡标题上使用图像/图标而不是文本标题（或者可能同时使用它们），我正在使用 titleStyleClass 设置图像背景进行测试，但不起作用

我的 primefaces 选项卡：

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

我的 css 样式

 .tCliente 

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

感谢您的帮助：D

Answer 1

在 PrimeFaces 3.0 及更高版本上，您可以添加一个方面来覆盖选项卡上的标题：

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

希望它有帮助。

Answer 2

尝试添加 display:inline-block;

Answer 3

您应该输入：

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

但之后我遇到了问题：图像重复到标题中。
我试图解决添加 background-repeat:no-repeat; 但是一样的......有人可以帮忙吗？

Answer 4

试试这个方法

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