How would i add small icons inside the fields of a form?

  • 6 January 2016
  • 1 reply
  • 12 views

like little icon of phone inside the phone field. it is done a lot nowadays…


1 reply

Userlevel 7
Badge +3

Hi Gil, 

To get an icon inside a field you just have to use a bit of CSS. 

Here is a quick example I threw together: http://unbouncepages.com/inline-icon/

Here is the CSS:

  

#phone_number {<br />&nbsp; &nbsp; background-image:url(<a href="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__phone.png)" rel="nofollow" target="_blank" title="Link https//cdn1iconfindercom/data/icons/MetroStation-PNG/128/MB__phonepng">https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__phone.png)</a>;&nbsp;<br />&nbsp; &nbsp; background-repeat: no-repeat;&nbsp;<br />&nbsp; &nbsp; background-position: 98% 50%;<br />&nbsp; &nbsp; background-size: 20px 20px;<br />&nbsp; }<br />

Of course, there are multiple ways to go about it and you can style it to fit your overall page design but that’s the basic idea.

Best,
Hristian

Reply