Newbie: how to put an icon without a button?

UI Components for JSF
Post Reply
mauromol
Posts: 26
Joined: 11 Apr 2014, 16:32

11 Apr 2014, 16:51

Hello,
I'm new to PrimeFaces and JSF in general.

My question is simple: suppose I have:

Code: Select all

<p:commandButton icon="icon icon-trash" />
Now, I want to have the same icon but without the backing button. It means, just a static image. Something like that:

Code: Select all

<p:icon icon="icon icon-trash" />
I know those are references to icons defined in styles, however I tried many combinations without luck:

Code: Select all

<h:outputText styleClass="ui-icon ui-icon-trash" />
<span class="ui-icon ui-icon-trash" />
The first one is near the result of <p:commandButton>, but the rendered icon is different. The second one almost doesn't work. In any case, I have to specify different icon names (i.e.: ui-icon-trash instead of just icon-trash).
This is a bit confusing to me. Isn't there a PrimeFaces tag to mimic a <p:commandButton> without a button?

Using PrimeFaces 3.3, JSF 2.0.3, Tomcat 7.

Thanks in advance,
Mauro

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

15 Apr 2014, 09:07

The first one is near the result of <p:commandButton>, but the rendered icon is different.[/quote]
How different? We cannot 'guess'...
mauromol wrote: The second one almost doesn't work. In any case, I have to specify different icon names (i.e.: ui-icon-trash instead of just icon-trash).
This is a bit confusing to me.
Well, if it is only a 'bit' confusing, you'll be used to it at the end of the day
mauromol wrote:Isn't there a PrimeFaces tag to mimic a <p:commandButton> without a button?
No, but you might try to remove all the button styling with css...
mauromol wrote:Using PrimeFaces 3.3, JSF 2.0.3, Tomcat 7.
You might try a newer version of PF

mauromol
Posts: 26
Joined: 11 Apr 2014, 16:32

15 Apr 2014, 09:26

When I say it's a 'bit' confusing it's a metaphor.
What confuses me is what is the magic (and whether it's documented somewhere?) behind the use of "icon" attribute of <p:commandButton> tag. The PrimeFaces 3.3 manual just says for it: "Icon of the button as a css class.". So, if I have to specify the CSS class, why can I specify "icon-trash" rather than "ui-icon-trash"? I checked the DOM element with Firefox and the actual applied style class is ".ui-icon-trash", for instance. This is why I tried "<h:outputText styleClass="ui-icon-trash" />". However, the rendered icon is different (by "different" I mean: the two tags, <p:commandButton> and <h:outputText>, output two totally different trash images).

Another thing which is confusing is why there's no "icon" attribute for many other PF tags for which it would be useful.

I can't upgrade my PF version right now, I'm working on a production application.

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

15 Apr 2014, 10:27

What confuses me is what is the magic (and whether it's documented somewhere?) behind the use of "icon" attribute of <p:commandButton> tag. The PrimeFaces 3.3 manual just says for it: "Icon of the button as a css class.". So, if I have to specify the CSS class, why can I specify "icon-trash" rather than "ui-icon-trash"?
The 3,3 documentation is 3 years old... So it might just have been a 'bug' in the documentation
So, if I have to specify the CSS class, why can I specify "icon-trash" rather than "ui-icon-trash"? I checked the DOM element with Firefox and the actual applied style class is ".ui-icon-trash", for instance.
That is the magic...

Code: Select all

 icon="icon-trash" -> class="ui-icon ui-icon-trash"
However, the rendered icon is different (by "different" I mean: the two tags, <p:commandButton> and <h:outputText>, output two totally different trash images).
'Totally different' is indeed much clearer than 'different' ;-)

I tried adding class="ui-icon ui-icon-trash" to an element and it works for me in 3.5, 4.0 and 5.0-SNAPSHOT

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 20 guests