Meine eigenen primefaces p:commanButton-Symbol

Kann ich nicht verwenden, mein eigenes Symbol für eine primefaces p:commandButton. Mein code ist:

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

css ist:

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

Struktur der Ordner ist gewöhnlich: /resources/images/cancel_16.png

Als Ergebnis bekomme ich: Meine eigenen primefaces p:commanButton-Symbol

Wenn ich versuche:

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

Bekomme ich:Meine eigenen primefaces p:commanButton-Symbol

Wenn ich einen Blick in firebug Bericht, Sektion Spannweite

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

es ist:

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

Ich habe mir bei diesem Erklärung, und anderen, fand aber keine Antwort.

Wenn ich versuche p:commandLink mit h:graphicImage-Symbol ist sichtbar, aber es ist ein Bild wie ein button/link.

Was ist die Dritte Antwort aus dem link, den Sie zur Verfügung gestellt ? Ich habe dir dort einen Kommentar auch.
Es funktioniert nicht für mich: <p:graphicImage value="images/cancel_16.png" /> . Wenn ich es versuche: "<p:commandLink ajax="false"> <p:graphicImage name="images/cancel_16.png" /> </p:commandLink> dann bekomme ich ein Bild als link, können "angeklickt" haben, aber ich will einen command-button mit icon UND Titel.
was ist die Größe des Bildes ?

InformationsquelleAutor Zbyszek | 2013-07-12

  1. 14

    Zbyszek, diese sind die Schritte, die ich nahm, um die Ausgabe unten. Basierend auf Ihren Kommentar, ich gehe davon aus, dass das, was Sie nach.

    Meine eigenen primefaces p:commanButton-Symbol

    Hinweis: Mein Bild wurde der name test.jpg und es war in das folgende Verzeichnis
    resources/images/test.jpg.
    Auch die Stil-Regel, die Sie zur Verfügung gestellt wurde in resources/css/style.css. Die Größe von meinem Bild wurde 25 x 17 (aber ich bezweifle, dass das wichtig ist. Ich sage nur, in diesem Fall Sie jetzt denken, das icon ist zu klein).

    In <h:head> stellen Sie sicher, Sie haben (Vielleicht haben Sie vergessen, das hinzuzufügen und die styles nicht angewendet werden ?)

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

    Mein <p:commandButton> (bei Bedarf ändern, es war nur ein schnelles mock-up) 

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

    und Ihre Regel 

    .ui-icon-myCancel{
    background-image: url("#{resource['images/test.jpg']}") !important;
}
    Dies ist eine richtige Antwort.
    Vielen Dank für die richtige Antwort. Mein Fehler war der falsche Pfad zu dem Bild. Ich habe kodiert es so: url(images/cancel_16.png). Aber wenn ich JSF-resource-identifier in einer Weise hast du: url("#{resource['images/cancel_16.png']}") suddnely 🙂 - Symbol erschien. Auch Sie wird angezeigt, wenn ich code: url(../resources/images/cancel_16.png) oder url(/MyAppName/resources/images/cancel_16.png). Also es war alles über die richtige Referenz zum Bild, und ich denke, dass die Verwendung von resource identifier (die Sie zeigt), ist der beste Weg.
    Ja, es war entweder der h:outputStyleSheet oder es war nicht lokalisieren das Bild. Ich lief in dieses problem eine Weile zurück. Sie Gaben mir den falschen Weg, zumindest denke ich nicht. Ich habe nur Hinzugefügt, dass beachten, damit Sie sehen konnte, genau das, was ich Tat. Froh, dass es geklappt hat. Du bist herzlich willkommen.
    Vielen Dank für die Unterstützung.

    InformationsquelleAutor Andy

  2. 1

    Diese einfache url () - version funktioniert auch auf Primefaces 6.1:
    .ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
    (wenn man die icon-Datei, die auf web - /img-Ordner und die css-Datei im web-Ordner)

    Aber es Runden Sie die Ecken von Symbol, deshalb habe ich diese Lösung verwenden: 

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

    InformationsquelleAutor Linkman

Schreibe einen Kommentar