1

How to show some icon next to text in the PrimeFaces

I am using p:submenu like the following

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

I would like to show some icon next to Menu1 like the following image, I tried to set icon and iconPos="right" but i could not get it working the way i wanted.

Please refer the image enter image description here

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Joe
  • 4,460
  • 19
  • 60
  • 106

1 Answers1

2

The attribute iconPos is present in the tag definition for menuitem but it doesn't appear to be used at all in the underlying code. Instead, you can add the content you want between the opening and closing menuitem tags. For example:

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

enter image description here

To make the text align, add a dummy or white icon to the menuitem. Here I used angle-bracket to illustrate.

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

enter image description here

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Brooksie
  • 361
  • 2
  • 5
  • Does this work instead: ` My Take Actions ` ? – Brooksie May 11 '21 at 09:35
  • The text for the menu item must be between the menuitem tags for this to work, not in a value attribute. If only the icon is not working, make sure the FontAwesome context parameter is set in web.xml, or switch to prime icons (pi pi-envelope) or [define a new CSS class for the icon](https://stackoverflow.com/questions/11120311/how-can-i-make-use-of-customized-icons-in-primefaces). Which version of PF are you using? – Brooksie May 11 '21 at 11:32