Show icon in p panel title:

Question

I am using component <p:panel>

If we take the “Extended Panel” as an example, is there a way that allows me to add an icon to the left of the text “About Barca”?

Answer 1

You can expand the title using <f:facet name="header">

<f:facet name="header">
  <h:panelGrid columns="2">
    <span class="ui-icon" />
    <h:outputText value="About Barca" />
  </h:panelGrid>
</f:facet>

You can use the element spanplus CSS customization or component p:graphicImage.

Answer 2

So you can add an icon to the panel component:

<p:panel header="the header text you want">
    <f:facet name="actions">
        <p:commandLink
            styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
            <h:outputText styleClass="ui-icon ui-icon-help" />
        </p:commandLink>
    </f:facet>
</p:panel>