Add icon (e.g. material design or Prime Icons) to a p:inputText

问题

I want to add an icon for an input text element, in a JavaEE project:

<h:panelGroup styleClass="md-inputfield">
    <p:inputText id="name"
                 value="#{createCustomerView.customer.name}" required="true"
                 label="Nome" requiredMessage="inserisci il nome">
        <f:validateLength minimum="2" />
    </p:inputText>
    <p:outputLabel for="name" value="Nome" />
    <p:message for="name" display="icon" />
</h:panelGroup>

How Can add an icon, like a person icon?

回答1:

You can make use of Primefaces input group. refer https://www.primefaces.org/showcase/ui/input/inputGroup.xhtml

<div class="ui-inputgroup">
  <span class="ui-inputgroup-addon"><i class="pi pi-user"></i></span>
  <p:inputText placeholder="Username" />      
</div>

But don't forget you do need to add the PrimeIcons by adding this to your h:head

(like mentioned in https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml)

回答2:

Please note that the input group is not a component, but a set of CSS rules. Those rules where added in PrimeFaces 7. If you are using an older version of PrimeFaces, it's a good idea to upgrade for many other reasons, but if you really cannot, you can always add the CSS rules to your own project as custom styles.

Alternatively, you should remember that JSF / PrimeFaces will simply render HTML. So you can always resort to a solution using CSS, as can be found at: Put icon inside input element in a form.