Moje własne główne p: ikona commanButton

Nie mogę użyć własnej ikony dla podstawowych właściwości p: commandButton. Mój kod to:Moje własne główne p: ikona commanButton

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

CSS:

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

Struktura folderów jest zwyczajne: /resources/images/cancel_16.png

W efekcie uzyskać: enter image description here

Kiedy próbuję:

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

uzyskać: enter image description here

Kiedy patrzę w raporcie firebug istnieje rozpiętość sekcja

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

znajduje się:

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

Mam spojrzał na tym explanation i inni, ale nie znalazł odpowiedzi .

Kiedy próbuję p: commandLink z h: graphicImage ikona jest widoczna, ale jest obrazem jako przycisk/link.

Źródło

2013-07-12 Zbyszek

Co z trzecią odpowiedzią podanego linku? Zostawiłem tam także komentarz. – Andy

To nie działa dla mnie: .Jeśli spróbuję: dostaję obrazek jako link, który można "kliknąć", ale chcę przycisk polecenia z ikoną ORAZ tytułem. – Zbyszek

Jaki jest rozmiar twojego zdjęcia? – Andy

Zbyszek, to są kroki, które podjąłem, aby uzyskać wyjście poniżej. Na podstawie Twojego komentarza zakładam, że właśnie o to prosisz.

commandButton with value and icon

Uwaga: imię mój obraz był test.jpg i to w następującym katalogu resources/images/test.jpg. Podana zasada stylu została umieszczona w resources/css/style.css. Wielkość mojego obrazu wynosiła 25 x 17 (ale wątpię, żeby to było ważne, mówię to tylko w przypadku, gdy myślisz, że ikona jest za mała).

W <h:head> upewnij się, że (Może zapomniałeś dodać to i style nie były stosowane?)

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

My < p:commandButton> (zmiany, ile potrzeba, to było po prostu szybki mock up)

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

i reguła

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

Źródło

2013-07-13 00:23:23 Andy

To jest poprawna odpowiedź. –

Dzięki za poprawną odpowiedź. Moja wina polegała na podaniu niewłaściwej ścieżki do obrazu. Zakodowałem to tak: url (images/cancel_16.png). Ale kiedy używam identyfikatora zasobu JSF w sposób, który zrobiłeś: url ("# {resource ['images/cancel_16.png']}") suddnely :) ikona pojawiła się. Pojawia się również, gdy koduję: url (../ resources/images/cancel_16.png) lub url (/MyAppName/resources/images/cancel_16.png). Chodziło więc o właściwe odniesienie do obrazu i myślę, że najlepszym sposobem jest użycie identyfikatora zasobu (który pokazujesz). – Zbyszek

@Zbyszek Tak, był to albo 'h: outputStyleSheet' albo nie znajdował obrazu. Natychmiast wpadłem na ten problem. Nie podałeś mi niewłaściwej ścieżki, przynajmniej nie sądzę. Właśnie dodałem tę notatkę, żebyś mógł dokładnie zobaczyć, co robię. Cieszę się, że to się udało. Nie ma za co. – Andy

Ten prosty url() wersja działa również na Primefaces 6.1:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(jeśli umieścić plik ikony do internetowej folderze/img i plik CSS jest w katalogu internetowym)

ale rundy rogach ikony dlatego Używam tego rozwiązania:

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

Źródło

2017-06-01 13:08:01 Linkman

Moje własne główne p: ikona commanButton

Odpowiedz

Powiązane problemy