Question

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?

Answer 1

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

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

Answer 2

请注意，input group不是组件，而是一组CSS规则。这些规则已在PrimeFaces 7中添加。如果您使用的是PrimeFaces的较旧版本，出于许多其他原因进行升级是个好主意，但如果确实不能，则可以始终将CSS rules添加到您自己的项目中，如下所示：自定义样式。

或者，您应该记住，JSF / PrimeFaces将仅呈现HTML。因此，您始终可以使用CSS解决方案，如Put icon inside input element in a form所示。

另请参阅：

How do I override default PrimeFaces CSS with custom styles?

Add icon material design style for an inputText

2 个答案: