需要帮助在命令按钮中显示图标图像

Question

只是基本需求，但无法使其发挥作用。 我想要一个 primefaces 按钮来显示我的图像，而不需要任何文本。

但我得到的是一个仅包含 ^ 字符的按钮，并且不显示图像，该图像的大小仅为 16x16。

---

所以，这是 primefaces 按钮：

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

---

这是 css 文件：

.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

---

我使用 tomcat 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

经过使用 firebug 的一些调查后，我发现罪魁祸首来自我定义的 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：

<button type="submit" title="Excel Document" onclick=";" 
  name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
  role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-xls"></span>
    <span class="ui-button-text">ui-button</span>
</button>

---

谢谢！

Answer 2

在图标类名称之前写入 ui-widget ，

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

.ui-state-default 不会使其在其他组件中可见，例如 ; 和

Answer 3

Primefaces 提供 graphicImage，如其 showcase-labs (损坏的链接）：

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

它在某种程度上对某人有用。

---

_{* 对于 PrimeFaces 5.2，请访问此展示实验室链接 。
请注意，在这种情况下，上述代码将不起作用。}

Answer 4

使用 commandButton 时，png 文件大小必须为 16 x 16，这一点很重要，因为较大的图像可能无法正确显示，或根本不显示。