Hiển thị nút lệnh chỉ với hình ảnh

Question

Tôi đang cố gắng hiển thị nút chỉ có hình ảnh trên trang của mình nhưng tất cả những gì tôi thấy là nút có ^. Sau đây là mã cho nút của tôi:

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/> 
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode"> 
    <ui:include src="lineSearch.xhtml"/> 
</p:dialog> 

Hình ảnh không tồn tại trong thư mục hình ảnh. Nút được hiển thị như sau trong trang:

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:'j_idt23',source:'j_idt23:j_idt27',process:'@all'});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span> 
    <span class="ui-button-text">ui-button</span> 
</button> 
<script type="text/javascript"> 
    widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', {text:false,icons:{primary:'backgroung-image:url(/images/title_logo.jpg)'}}); 
</script> 

Cảm ơn !!!

Answer 1

Thuộc tính image phải tham chiếu CSS tên lớp, không phải là thuộc tính CSS thuần túy. Vì vậy, điều này sẽ làm:

<p:commandButton image="someCssClassName" /> 

những điều sau đây CSS của bạn:

.someCssClassName { 
    background-image: url(images/title_logo.jpg) 
} 

Xin lưu ý rằng tôi đã cố định các lỗi đánh máy lớn trong tên thuộc tính và cũng có thể loại bỏ các dấu gạch chéo hàng đầu từ URL hình ảnh, nó nếu không sẽ được giải quyết liên quan đến gốc của tên miền của trang web; ở trên mong đợi các title_logo.jpg được bên trong một thư mục /image mà lần lượt là trong thư mục nơi tệp CSS cư trú.

Tuy nhiên, đây là một trong ít vụng về, tôi nghĩ rằng:

<p:commandLink action="#{bean.submit}"> 
    <h:graphicImage name="images/title_logo.jpg" /> 
</p:commandLink> 

Answer 2

Đặt này trên phong cách css của bạn:

.dolar-icon { 
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;} 

Bây giờ bạn có thể sử dụng biểu tượng "dolar-biểu tượng" mà bạn định nghĩa trong css của bạn.

<p:commandButton action="#{as.fe}" icon="dolar-icon"/> 

Answer 3

Thậm chí dễ dàng hơn:

<p:commandButton icon="ui-icon-XXXXX"> 

các biểu tượng khác nhau bạn có thể chọn: https://api.jqueryui.com/theming/icons/ và http://www.primefaces.org/showcase/ui/misc/fa.xhtml