Wie wird ein Bild als Wasserzeichen in TextField mithilfe von Primefaces eingefügt?

Question

Klicken Sie auf den folgenden Link, TextBox with search Image on Left

ich möchte das Textfeld genau das sameway mit Wasserzeichen darin. Ich habe versucht, mehrere Möglichkeiten, aber nichts funktionierte

Inhalt von meiner .xhtml Datei

<h:inputText id="bundelId" styleClass="icon2" value=""> 

<p:watermark value="Enter Bundel Id" for="bundelId"  styleClass="icon2"></p:watermark> 
            </h:inputText> 

Meine CSS enthält folgende Klassen

.icon2 { 


background: url(search.gif) no-repeat 4px 4px; 
padding:4px 4px 2px 20px; 
height:10px; 
margin: 0; 

} 

.icon3 { 



float: right; 
background: url(search.gif) no-repeat left bottom; 
border: 0; 
cursor: pointer; 
margin: 0; 

} 

Ich habe versucht, beide mit JSF und primefaces Tags zusammen mit CSS Klassen oben erwähnt.

Kann jemand helfen?

Answer 1

wenn Sie FontAwesome verwenden könnten Sie versuchen:

<p:watermark value="&#xF002; Enter Bundel Id" for="bundelId" /> 

<h:inputText id="bundelId" value="" style="font-family:Arial, FontAwesome"> 

 die Unicode für Symbol-Suche zu sein.