show icon with p:commandLink

Question

How to show an icon with commandLink:

<p:commandLink 
         styleClass="ui-icon ui-icon-plus"
         action="#{bean.doSomething}"     >

         <h:outputText value="Add" />   
</p:commandLink>

The outputText (Add) is not visible. What is the right way for commandLink to support icon? Thanks.

Odle

Answer 1

<p:commandLink action="#{bean.doSomething}">
     <h:outputText value="Add" class="ui-icon ui-icon-plus"/>   </p:commandLink>

Harter

Answer 2

My answer is a bit of a combination of the previous two answers, but it worked the best for me. Remove styleClass, but you don't need to use graphicImage.

Instead you can use the <i class=""></i> tag.

    <p:commandLink action="#{bean.doSomething}">
        <h:outputText value="Add"/><i class="ui-icon ui-icon-plus"></i>
    </p:commandLink>

Reiche

Answer 3

You can use the Awesome library with a lot of icons. This an example how o it has worked for me:

<!-- Delete Button -->
<p:commandLink style="padding: .3em 1em"
                      styleClass="fa fa-trash"      
                      process=":formDataTable:customers"                                       
                      update=":formDataTable:customers">
    <p:confirm header="Delete Confirmation" message="Are you sure?" icon="ui-icon-alert" />
    <p:collector value="#{customer}" removeFrom="#{customersController.customers}" unique="true"/>
</p:commandLink>

In your case it would be like this:

<p:commandLink 
     styleClass="fa fa-user-plus"
     action="#{bean.doSomething}">
     <h:outputText value="Add" />   
</p:commandLink>

Just be sure to the the web.xml with primefaces.FONT_AWESOME to true like this:

<!-- web.xml -->
 <context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
 </context-param>

I hope it helps somebody else!

Gorga

Answer 4

You should remove styleClass and use a graphicImage with a text :

<p:commandLink >
    <h:graphicImage value="resources/images/add.png" title="add"  >
        add
    </h:graphicImage>
</p:commandLink>  

Muley