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

只是一个基本的需要，但无法使其发挥作用。 我想有一个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>

---

这是为按钮生成的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>

---

我使用的是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>

org.primefaces
素面
2.2.1
com.sun.faces
JSFAPI
2.0.4-b09
编译
com.sun.faces
jsf impl
2.0.4-b09
编译

---

你知道哪里出了问题吗

---

谢谢大家!

在使用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>

---

下面是生成的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>

用户界面按钮

---

---

谢谢大家!

Primefaces提供了

图形图像

，如下所示：

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

---

*。

---

请注意，在这种情况下，上述代码将不起作用。

在图标类名之前写入

ui小部件

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

---

当使用

命令按钮时，
.ui状态默认值
不会使其在其他组件（如
和
中可见，png文件大小必须为16 x 16，因为较大的图像可能无法正确显示，或者根本无法显示。
您确定css找到图像了吗（正确的相对路径）？如果您请求包含按钮的页面，请尝试使用Chrome/Firefox开发工具检查404错误。@Matt Handy:您好，谢谢您的回复。是的，正如原始帖子中所述，我可以使用该URL查看图像。而且我忘了提到我也使用firebug查看了图像。但是我找到了一个解决方案在对css进行一些调整之后。如果您感兴趣，请查看下面的答案。谢谢！我不再玩这个项目，也无法测试它。但我认为这是最安全的答案。谢谢您的分享。很好的解决方案！但是Primefaces的类变化很大，这就是为什么它可能对某些人不起作用，并且可能会在版本更新时中断…到它可能会帮助谁：检查生成的html和/或查看所使用版本的相应primefaces样式文档，然后您就可以使用css了！@Zbyszek这个答案如何？
.ui-state-default .ui-icon-xls {
    background-image: url(images/excel_small.png);
}

<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>

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

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