Các nguyên tố riêng của tôi p: biểu tượng commanButton

Question

Tôi không thể sử dụng biểu tượng của riêng mình cho một dấu phẩy p: commandButton. Mã của tôi là:

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

css là:

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

Cấu trúc của thư mục là bình thường: /resources/images/cancel_16.png

Kết quả là tôi nhận được:

Khi tôi cố gắng:

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

tôi nhận được:

Khi tôi nhìn vào báo cáo firebug, có khoảng phần

<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"); 

Tôi đã nhìn explanation này, và những người khác nhưng không tìm thấy câu trả lời .

Khi tôi thử p: commandLink với h: biểu tượng graphicImage hiển thị, nhưng nó là một hình ảnh dưới dạng nút/liên kết.

Answer 1

Zbyszek, đây là các bước tôi đã thực hiện để có được kết quả dưới đây. Dựa trên nhận xét của bạn, tôi giả định đó là những gì bạn đang sau.

Note: Tên bức tranh của tôi là test.jpg và nó là trong thư mục sau resources/images/test.jpg. Ngoài ra quy tắc kiểu bạn đã cung cấp được đặt trong resources/css/style.css. Kích thước của hình ảnh của tôi là 25 x 17 (nhưng tôi nghi ngờ điều đó quan trọng. Tôi chỉ nói điều này trong trường hợp bạn đang nghĩ biểu tượng quá nhỏ).

Trong <h:head> chắc chắn rằng bạn đã (Có lẽ bạn quên để thêm video này và phong cách đã không được áp dụng?)

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

My < p:commandButton> (thay đổi khi cần thiết, nó chỉ là một giả nhanh chóng trở lên)

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

và quy tắc của bạn

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

Answer 2

url đơn giản này() phiên bản cũng hoạt động trên Primefaces 6.1:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(nếu bạn đặt các tập tin biểu tượng để web/thư mục img và file css nằm trong thư mục web)

Nhưng nó vòng các góc của biểu tượng do đó Tôi sử dụng giải pháp này:

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