如何在p:menuitem中使用堆叠的Font Awesome图标?

mr.*_*hea 5 css primefaces font-awesome jsf-2.2

我正在使用Font Awesome PrimeFaces集成(使用常规图标)并且效果很好.

现在我试图通过以下方式使堆叠图标工作:

<span class="fa-stack fa-lg">
   <i class="fa fa-square-o fa-stack-2x"></i>
   <i class="fa fa-twitter fa-stack-1x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

在我使用PrimeFaces的代码示例中,我有类似的东西

<p:submenu expanded="true" label="Request" styleClass="groupmenu">
    <p:menuitem value="Annual Forecast" outcome="coursesList.xhtml" icon="fa fa-pencil" />
    <p:menuitem value="Forecast History" outcome="annualList.xhtml" icon="fa fa-eye"  />
</p:submenu>
Run Code Online (Sandbox Code Playgroud)

我想,以取代fa-pencilfa-eye一些堆积图标

我怎样才能实现它?谢谢