如何使用commandLink显示图标:
<p:commandLink
styleClass="ui-icon ui-icon-plus"
action="#{bean.doSomething}" >
<h:outputText value="Add" />
</p:commandLink>
输出文本(添加)不可见。 commandLink支持图标的正确方法是什么?感谢。
答案 0 :(得分:4)
<p:commandLink action="#{bean.doSomething}">
<h:outputText value="Add" class="ui-icon ui-icon-plus"/> </p:commandLink>
答案 1 :(得分:1)
您可以使用带有很多图标的Awesome库。这个例子对我有帮助:
<!-- 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>
您的情况是这样的:
<p:commandLink
styleClass="fa fa-user-plus"
action="#{bean.doSomething}">
<h:outputText value="Add" />
</p:commandLink>
只需确保使用primefaces.FONT_AWESOME将web.xml设置为true,如下所示:
<!-- web.xml -->
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
我希望它对其他人有帮助!
答案 2 :(得分:0)
您应该删除styleClass
并使用带有文字的graphicImage
:
<p:commandLink >
<h:graphicImage value="resources/images/add.png" title="add" >
add
</h:graphicImage>
</p:commandLink>
答案 3 :(得分:0)
我的回答是前两个答案的结合,但对我来说效果最好。移除styleClass
,但您不需要使用graphicImage
。
相反,您可以使用<i class=""></i>
标记。
<p:commandLink action="#{bean.doSomething}">
<h:outputText value="Add"/><i class="ui-icon ui-icon-plus"></i>
</p:commandLink>