Kendi ilk adımlarım: commanButton icon

Question

Kendim için bir simge kullanamıyorum p: commandButton. Benim kodudur:

<p:commandButton value="Cancel" action="#{userBb.cancel()}" 
     icon="ui-icon-myCancel" /> 

css geçerli: klasörlerin

.ui-icon-myCancel{ 
    background-image: url(images/cancel_16.png) !important; 
} 

Yapısı sıradan: Sonuç olarak /resources/images/cancel_16.png

i olsun:

Ben çalıştığınızda:

.ui-state-default .ui-icon .ui-icon-myCancel{ 
    background-image: url(images/cancel_16.png) !important; 
} 

alıyorum:

ben firebug raporuna baktığınızda, orada bölüm açıklığı

<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span> 

vardır:

.ui-state-default .ui-icon { 
    background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo"); 

Bu explanation baktık ve diğerleri ama hiçbir cevap bulduk .

p: commandLink ile h: graphicImage simgesi göründüğünde görünür, ancak bir düğme/bağlantı olarak bir görüntüdür.

Answer 1

Zbyszek, aşağıdaki çıktıyı elde etmek için attığım adımlar bunlar. Yorumunuza dayanarak, peşinde olduğunuzu varsayıyorum.

Not: My resmin adı test.jpg oldu ve aşağıdaki dizinde resources/images/test.jpg oldu. Ayrıca sağladığınız stil kuralı resources/css/style.css'a yerleştirildi. Görüntünün boyutu 25 x 17 idi (ancak bunun önemli olduğunu sanmıyorum. Simgenin çok küçük olduğunu düşünüyorsanız bunu söylüyorum). <h:head> yılında

Eğer emin olun (Belki bu eklemeyi unuttuğu ve stiller uygulanan değildi?)

<h:outputStylesheet name="css/style.css" /> 

p:commandButton> < (gerektiğinde değişiklik, bu sadece çabuk sahte kadar oldu) Benim

<p:commandButton value="Cancel" icon="ui-icon-myCancel" /> 

ve kural

.ui-icon-myCancel{ 
    background-image: url("#{resource['images/test.jpg']}") !important; 
} 

Answer 2

Bu basit url() sürümü de Primefaces 6.1 üzerinde çalışır:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(web/img klasörüne simge dosyasını koymak ve css dosyası web klasöründe ise)

Ama mermi köşeleri nedenle simgenin Bu çözümü kullanırım:

.ui-icon-myCancel{background-image: url(img/cancel.gif)!important; 
        border-radius: 0px!important;}