如何在 p:menuitem 值的右侧显示图标答案

【问题标题】：How to show icon at the right side of a p:menuitem value如何在 p:menuitem 值的右侧显示图标
【发布时间】：2021-05-06 03:58:33
【问题描述】：

如何在 PrimeFaces 中的文本旁边显示一些图标

我正在使用p:submenu，如下所示

<p:submenu id="test" label="Manu Name"> 
    <p:menuitem id="menu1" value="Menu1 #{someController.showRedAlert ? 'redAlert' : ''}" outcome="myOutCome" ></p:menuitem>
</p:submenu>

我想在 Menu1 旁边显示一些图标，如下图所示，我尝试设置 icon 和 iconPos="right"，但无法按我想要的方式工作。

请参考图片

【问题讨论】：

标签： primefaces

【解决方案1】：

iconPos 属性存在于menuitem 的标记定义中，但它似乎根本没有在底层代码中使用。相反，您可以在开始和结束 menuitem 标记之间添加所需的内容。例如：

<p:menuitem action="nextScreen">Send
    <i class="fa fa-envelope"/>
</p:menuitem>

要使文本对齐，请向menuitem 添加一个虚拟或白色图标。这里我用尖括号来说明。

<p:menuitem action="nextScreen" icon="pi pi-angle-right">Send
    <i class="pi pi-envelope"/>
</p:menuitem>

【讨论】：

这是否可行：<p:menuitem id="crmClientTakeAction" outcome="takeActionHome" > My Take Actions <f:param name="paramName" value="parmVal" /> <i class="#{someController.valueExist ? 'fa fa-envelope' : ''}"/> </p:menuitem> ?
菜单项的文本必须在 menuitem 标记之间才能起作用，而不是在值属性中。如果只有图标不起作用，请确保在 web.xml 中设置了 FontAwesome 上下文参数，或者切换到主图标 (pi pi-envelope) 或 define a new CSS class for the icon。您使用的是哪个版本的 PF？