My primefaces p: icona commanButton

Non riesco a utilizzare la mia icona per un primefaces p: commandButton. Il mio codice è:My primefaces p: icona commanButton

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

CSS è:

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

Struttura di cartelle è ordinario: /resources/images/cancel_16.png

Come risultato ottengo: enter image description here

quando provo:

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

ottengo: enter image description here

Quando guardo rapporto Firebug, non c'è arco sezione

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

c'è:

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

Ho guardato questo explanation, e altri, ma non ha trovato risposta .

Quando provo p: commandLink con h: l'icona graphicImage è visibile, ma è un'immagine come un pulsante/collegamento.

fonte

2013-07-12 Zbyszek

E la terza risposta dal collegamento che hai fornito? Vi ho lasciato un commento anche lì. – Andy

Non funziona per me: .Se provo: poi ottengo un'immagine come collegamento che può essere 'cliccato', ma voglio un pulsante di comando con l'icona E il titolo. – Zbyszek

qual è la dimensione della tua immagine? – Andy

Zbyszek, questi sono i passaggi che ho preso per ottenere l'output di seguito. Sulla base del tuo commento, presumo che sia quello che cerchi.

commandButton with value and icon

Nota: Il nome di mio dell'immagine erano test.jpg ed era nella seguente directory resources/images/test.jpg. Anche la regola di stile che hai fornito è stata posta in resources/css/style.css. La dimensione della mia immagine era 25 x 17 (ma dubito che sia importante. Sto solo dicendo questo nel caso tu stia pensando che l'icona sia troppo piccola).

In <h:head> assicurarsi che avete (Forse si è dimenticato di aggiungere questo e gli stili non erano applicate?)

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

mio < p:commandButton> (cambiamento come bisogno, era solo un rapido mock up)

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

e la regola

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

fonte

2013-07-13 00:23:23 Andy

Questa è una risposta corretta. –

Grazie per la risposta corretta. La mia colpa è stata quella di dare il percorso sbagliato all'immagine. L'ho codificato in questo modo: url (images/cancel_16.png). Ma quando uso l'identificatore di risorse JSF in un modo che hai fatto: url ("# {resource ['images/cancel_16.png']}") apparentemente :) icona apparso. Inoltre appare quando codice: url (../ resources/images/cancel_16.png) o url (/MyAppName/resources/images/cancel_16.png). Quindi si trattava di un corretto riferimento all'immagine, e penso che usare l'identificatore di risorsa (che mostri) sia il modo migliore. – Zbyszek

@Zbyszek Sì, era "h: outputStyleSheet' o non stava localizzando l'immagine. Mi sono imbattuto in quel problema un po 'di tempo fa. Non mi hai dato la strada sbagliata, almeno non penso. Ho appena aggiunto quella nota in modo da poter vedere esattamente cosa stavo facendo. Sono contento che ha funzionato. Prego. – Andy

Questo semplice url() versione funziona anche sui primefaces 6.1:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(se si mette il file di icona nella cartella web/img e il file CSS nella cartella web)

ma giri gli angoli dell'icona pertanto Io uso questa soluzione:

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

fonte

2017-06-01 13:08:01 Linkman

risposta

Problemi correlati