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

Question

如何在 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"，但无法按照我想要的方式工作。

请参考图片

Answer 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>