CODEWITHSUNDEEP
jsfprimefaces
bvb1909
bvb1909

Reputation: 201

JSF show icon without Button

I want to show the icons without buttons but it doesn't work. I get the following message: no Mime-Type was Found.

The two icons are default icons from Primefaces.

I use JSF 2.1 and primefaces 3.5

<h:graphicImage rendered="#{!task.IS_SEEN}" name="ui-icon-mail-closed"/>
<h:graphicImage rendered="#{task.IS_SEEN}" name="ui-icon-mail-closed"/>

If I use buttons it would work or can I set that the button can not be pressed

<p:commandButton rendered="#{!task.IS_SEEN}" icon="ui-icon-mail-closed" />
<p:commandButton rendered="#{task.IS_SEEN}" icon="ui-icon-mail-open" />

Upvotes: 6

Views: 34100

Answers (3)

elbuild
elbuild

Reputation: 4899

If you want just a clickable image that trigger an action in the backing bean I suggest wrapping a graphic image in a h:commandLink.

<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
    <h:graphicImage  value="your-image-here"/>
</h:commandLink>

If you want easy to use, nice, vectorial icons I suggest you to check Font Awesome http://fontawesome.io/icons/ as well.

To use Font Awesome just include the following line in your <h:head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

Then you can easily put the icons inside commandLinks in this simple way:

<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
    <i class="fa fa-envelope"></i>
</h:commandLink>

Upvotes: 18

0x5a4d
0x5a4d

Reputation: 760

Also you need specify css class ui-icon like this:

<h:panelGroup styleClass="ui-icon ui-icon-mail-closed" />

Upvotes: 10

Kuba
Kuba

Reputation: 2089

those are in fact CSS classes that point to a sprite file, so technically they are not icons.

try using:

<h:panelGroup styleClass="ui-icon-mail-closed" rendered="#{!task.IS_SEEN}" />

and if there's a need style it accordingly with padding.

Upvotes: 0

Related Questions