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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:31:27  来源:igfitidea点击:

Need help to display an icon image in a command button

htmlcssjsfjsf-2primefaces

提问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,因为更大的图像可能不正确显示,或者根本不显示是非常重要的。