画像やアイコンをプライムスメントタブに追加する

Question

テキストタイトルの代わりにタブ/ヘッダーに画像/アイコンを使用しようとしています（または両方を使用している可能性があります）、画像の背景を設定してテストしていましたが

私primefacesタブ：

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

私のCSSスタイルあなたの助けを

.tCliente 

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

ありがとう：D

Answer 1

この方法を試してみてください。

<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

あなたは、タブ上のタイトルをオーバーライドするファセットを追加することができPrimeFaces 3.0以降で

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