명령 단추에 아이콘 이미지를 표시하는 데 도움이 필요합니다.

Question

기본적인 필요는 있지만 작동시키지 못합니다. 아무 텍스트도없이 내 이미지를 표시하기 위해 primefaces 버튼을 갖고 싶습니다.

하지만 내가 얻는 것은 ^ 문자 만 포함하고 16x16 크기의 이미지는 표시하지 않는 버튼입니다.

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false"> 
    <p:dataExporter type="csv" target="gridRPBDetails" 
     fileName="#{tInputBean.exportFilename}" /> 
</p:commandButton> 

---

이 CSS 파일입니다 :

---

그래서, 이것은 primefaces 버튼입니다

.ui-icon-csv { 
    background-image: url(images/csv_small.png); 
} 

---

는 그리고 이것은 버튼의 생성 된 HTML이다 :

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    role="button" aria-disabled="false"> 
     <span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span> 
</button> 

---

그리고 이미지에 액세스 증명하기 위해,이 URL을 시도하고 실제로 그것은 그림을 보여줍니다

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png 

---

임 바람둥이 7을 사용하고, 이러한 내 의존성은 다음과 같습니다

<dependency> 
    <groupId>org.primefaces</groupId> 
    <artifactId>primefaces</artifactId> 
    <version>2.2.1</version> 
</dependency> 
<dependency> 
    <groupId>com.sun.faces</groupId> 
    <artifactId>jsf-api</artifactId> 
    <version>2.0.4-b09</version> 
    <scope>compile</scope> 
</dependency> 
<dependency> 
    <groupId>com.sun.faces</groupId> 
    <artifactId>jsf-impl</artifactId> 
    <version>2.0.4-b09</version> 
    <scope>compile</scope> 
</dependency> 

---

어떤 아이디어 뭐가 잘못 됐어?

감사합니다.

Answer 1

방화범을 사용하여 조사한 결과, 나는 범인이 내가 정의한 CSS 항목에서 나온 것임을 알았습니다.

이 내용은 내가이 작업을하기 위해 변경 한 사항입니다.

---

은 JSF 버튼 :

<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false"> 
    <p:dataExporter type="xls" target="gridRPBDetails" 
     fileName="#{tInputBean.exportFilename}" /> 
</p:commandButton> 

---

CSS의 :

: 여기

.ui-state-default .ui-icon-xls { 
    background-image: url(images/excel_small.png); 
} 

---

그리고는 생성 된 HTML이다

---

고맙습니다!

<p:commandLink ajax="false"> 
    <p:graphicImage value="/images/excel.png" /> 
    <p:dataExporter type="xls" target="tbl" fileName="cars" /> 
</p:commandLink> 

그것은 다른 사람에게 어떻게든지 유용 할 수 있습니다 자신의 showcase-labs (broken link) 같이

Answer 2

Primefaces는 graphicImage을 제공합니다.

---

_{* For PrimeFaces 5.2, follow to this showcase-labs link. 이 경우 위의 코드는 작동하지 않습니다.}

Answer 3

쓰기 ui-widget.ui-state-default이 commandButton 사용 <p:menuitem/> 및 <p:menuButton/>

Answer 4

같은 다른 구성 요소에는 표시되지 않습니다

.ui-widget .ui-icon-xls { 
    background-image: url(images/excel_small.png); 
} 

아이콘 클래스 이름 앞에, PNG 파일 크기가하는 것이 중요하다 더 큰 이미지가 올바르게 표시되지 않거나 전혀 표시되지 않을 수 있기 때문에 16 x 16 크기입니다.