html - Font Awesome and text both in placeholder -
i want add font awesome , texts in placeholder in following html code @ same time want know process in details:
<!doctype html> <html> <head> <title>student-login</title> <link href='http://fonts.googleapis.com/css?family=shadows+into+light' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> </head> <body> <div class="body"></div> <div class="main-form"> <h1>student login</h1> <form class="login"> <input type="text" placeholder="*user name" name="username"></input><br> <input type="password" placeholder="*password" name="password"></input><br> <input type="text" placeholder="*first name" name="first_name"></input><br> <input type="text" placeholder="*last name" name="last_name"></input><br> <select name="gender"> <option value="">select</option> <option value="male">male</option> <option value="female">female</option> </select><br> <input type="text" placeholder="*e-mail" name="email"></input><br> <input type="text" placeholder="*phone number" name="phone"></input><br> <div class="button"><a href="index.html">login</a></div> <div class="button"><a href="#">submit</a></div> </form> </div> </body> </html>
to accomplish this, use fontawesome font setting css font-family
fontawesome
, referring icons want using fontawesome unicode reference.
for example, have fa-envelope
appear in placeholder, can use following:
<style type="text/css"> input {font-family:fontawesome;} </style> <!-- use  code fa-envelope --> <input type="text" placeholder=" e-mail" name="email" />
Comments
Post a Comment