Как поместить изображение в качестве водяного знака в TextField с использованием простых поверхностей?

Question

Нажмите на следующую ссылку, TextBox with search Image on Left

я хочу текстовое поле точно sameway с водяными знаками в нем. Я попробовал несколько способов, но ничего не получалось

Содержимое моего .xhtml файла

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

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

Мой CSS содержит следующие классы

.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; 

} 

Я пробовал как с JSF и primefaces тегов вместе с CSS классы, упомянутые выше.

Может кто-нибудь помочь?

Answer 1

если вы используете FontAwesome вы можете попробовать:

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

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

 быть юникода для иконописца поиска. https://fortawesome.github.io/Font-Awesome/cheatsheet/