Question

如何使用commandLink显示图标：

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

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

输出文本（添加）不可见。 commandLink支持图标的正确方法是什么？感谢。

Answer 1

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

Answer 2

您可以使用带有很多图标的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>

我希望它对其他人有帮助！

Answer 3

您应该删除styleClass并使用带有文字的graphicImage：

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

Answer 4

我的回答是前两个答案的结合，但对我来说效果最好。移除styleClass，但您不需要使用graphicImage。

相反，您可以使用<i class=""></i>标记。

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

用p：commandLink显示图标

4 个答案: