Thêm hình ảnh hoặc biểu tượng vào tiêu đề tab

Question

cố gắng sử dụng hình ảnh/biểu tượng trên tiêu đề tab thay vì tiêu đề văn bản (hoặc có thể sử dụng cả hai), tôi đã thử nghiệm bằng cách sử dụng tiêu đềStyleClass đặt nền hình ảnh nhưng không hoạt động

tab

primefaces tôi:

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

phong cách css My

.tCliente 

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

Nhờ sự giúp đỡ của bạn: D

Answer 1

On PrimeFaces 3.0 và mới hơn, bạn có thể thêm một khía cạnh để ghi đè lên tiêu đề trên tab:

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

Hy vọng nó giúp.

Answer 2

thử thêm display:inline-block;

Answer 3

Bạn nên đặt:

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

nhưng sau đó tôi có một vấn đề: hình ảnh lặp lại vào tiêu đề. Tôi đã cố gắng giải quyết thêm background-repeat:no-repeat; nhưng cũng giống nhau ... ai đó có thể trợ giúp không?

Answer 4

thử cách này

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