Html 需要帮助才能在命令按钮中显示图标图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5959654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need help to display an icon image in a command button
提问by bertie
Just a basic need but cannot get it to work. I would like to have a primefaces button to display my image, without any text.
只是基本需求，但无法让它发挥作用。我想要一个primefaces按钮来显示我的图像，没有任何文字。
But what i get is a button that contains only a ^character and does NOT displaying the image, which only has a size of 16x16.
但是我得到的是一个只包含一个^字符并且不显示图像的按钮，它的大小只有 16x16。
So, this is the primefaces button :
所以，这是primefaces按钮：
<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
<p:dataExporter type="csv" target="gridRPBDetails"
fileName="#{tInputBean.exportFilename}" />
</p:commandButton>
This is the css file :
这是 css 文件：
.ui-icon-csv {
background-image: url(images/csv_small.png);
}
And this is the generated html for the button :
这是为按钮生成的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>
And to prove the image accessible, i try this URL, and indeed it shows the picture :
为了证明图像可访问，我尝试了这个 URL，它确实显示了图片：
http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png
Im using tomcat 7, and these are my dependencies :
我使用的是 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>
Any ideas what went wrong ?
任何想法出了什么问题？
Thank you !
谢谢 ！
采纳答案by bertie
After some investigation using firebug, i found out that the culprit is from the CSS stuff i defined.
在使用 firebug 进行一些调查后，我发现罪魁祸首来自我定义的 CSS 内容。
So these are the changes i made to make this work.
所以这些是我为完成这项工作所做的更改。
The JSF button :
JSF 按钮：
<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false">
<p:dataExporter type="xls" target="gridRPBDetails"
fileName="#{tInputBean.exportFilename}" />
</p:commandButton>
The CSS :
CSS ：
.ui-state-default .ui-icon-xls {
background-image: url(images/excel_small.png);
}
And here is the generated html :
这是生成的 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>
Thank you !
谢谢 ！
回答by falsarella
Primefaces provide the graphicImageas shown in their showcase-labs (broken link):
Primefaces 提供了graphicImage如他们的展示实验室（断开的链接）中所示的内容：
<p:commandLink ajax="false">
<p:graphicImage value="/images/excel.png" />
<p:dataExporter type="xls" target="tbl" fileName="cars" />
</p:commandLink>
It can be useful in someway to someone.
它以某种方式对某人有用。
* For PrimeFaces 5.2, follow to this showcase-labs link. Note that, in that case, the above code wouldn't work.
*对于 PrimeFaces 5.2，请遵循此展示实验室链接。请注意，在这种情况下，上面的代码将不起作用。
回答by Talaat Safwat
write ui-widgetbefore the icon class name
写ui-widget在图标类名之前
.ui-widget .ui-icon-xls {
background-image: url(images/excel_small.png);
}
the .ui-state-defaultwill not make it visible in other components like <p:menuitem/>and <p:menuButton/>
该.ui-state-default不会使它像其他部分不可见<p:menuitem/>和<p:menuButton/>
回答by user2351270
When commandButtonis used, is important that the png file size be 16 x 16, because a bigger image might no be displayed correctly, or not displayed at all.
当commandButton使用时，该PNG文件的大小为16×16，因为更大的图像可能不正确显示，或者根本不显示是非常重要的。
