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