我自己的primefaces p:commanButton 图标 [英] My own primefaces p:commanButton icon

问题描述

我不能将自己的图标用于primefaces p:commandButton.我的代码是:

I cannot use my own icon for a primefaces p:commandButton. My code is:

    <p:commandButton value="Cancel" action="#{userBb.cancel()}" 
       icon="ui-icon-myCancel" /> 

css 是:

.ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

文件夹结构普通:/resources/images/cancel_16.png

结果我得到:

当我尝试时:

.ui-state-default .ui-icon .ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

我得到:

当我查看萤火虫报告时，有部分跨度

When I look at firebug report, there is section span

<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span>

有:

.ui-state-default .ui-icon {
    background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");

我看过这个说明 和其他人，但没有找到答案.

I have looked at this explanation, and others but found no answer.

当我尝试带有 h:graphicImage 图标的 p:commandLink 时，它是可见的，但它是作为按钮/链接的图像.

When I try p:commandLink with h:graphicImage icon is visible, but it is an image as a button/link.

推荐答案

Zbyszek，这些是我为获得以下输出而采取的步骤.根据您的评论，我假设这就是您所追求的.

Zbyszek, these are the steps I took to get the output below. Based on your comment, I'm assuming that's what you're after.

注意:我的图片名为test.jpg，在以下目录resources/images/test.jpg.您提供的样式规则也放置在 resources/css/style.css 中.我的图像的大小是 25 x 17(但我怀疑这很重要.我只是这样说，以防您认为图标太小).

Note: My picture's name was test.jpg and it was in the following directory resources/images/test.jpg. Also the style rule you provided was placed in resources/css/style.css. The size of my image was 25 x 17 (but I doubt that's important. I'm just saying this in case you're thinking the icon is too small).

在 <h:head> 中确保你有(也许你忘记添加这个并且没有应用样式?)

In <h:head> make sure you have (Maybe you forgot to add this and the styles weren't being applied ?)

<h:outputStylesheet name="css/style.css" />

我的 <p:commandButton>(根据需要更改，这只是一个快速模型)

My <p:commandButton> (change as needed, it was just a quick mock up)

<p:commandButton value="Cancel" icon="ui-icon-myCancel" /> 

和你的规则

.ui-icon-myCancel{
    background-image: url("#{resource['images/test.jpg']}") !important;
}

这篇关于我自己的primefaces p:commanButton 图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！