展示 p:commandLink 的图标

Question

如何在commandLink中显示图标：

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

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

输出文本(Add)不可见。commandLink支持图标的正确方式是什么？谢谢。

- Dave

Answer 1

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

- wysouf

Answer 2

我的答案是前两个答案的结合，但对我来说效果最好。删除 styleClass，但你不需要使用 graphicImage。相反，你可以使用 <i class=""></i> 标签。

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

- T.Kruger

Answer 3

您可以使用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>

只需确保将web.xml中的primefaces.FONT_AWESOME设置为true，如下所示：

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

我希望它能帮助其他人！

- webtechnelson

Answer 4

您应该删除styleClass并使用一个带有文本的graphicImage：

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

- Bilal Dekar