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

问题描述

我不能将我自己的图标用作质感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

Structure of folders is ordinary: /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屋！