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 &#xf0e0; code fa-envelope --> <input type="text" placeholder="&#xf0e0; e-mail" name="email" /> 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -