Шрифт удивительный и текст как в заполнителе

Я хочу добавить шрифт awesome и тексты в заполнитель в следующем HTML-коде, в то же время я хочу знать процесс в деталях: 

  <!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>
1 2
html css font-awesome placeholder

1 ответ:

Для этого используйте FontAwesome в качестве шрифта, установив CSS font-family в FontAwesome и ссылаясь на нужные значки с помощью ссылки FontAwesome Unicode.

Например, чтобы fa-envelope отображалось в заполнителе, можно использовать следующее: 

<style type="text/css">
    input {font-family:FontAwesome;}
</style>

<!-- use &#xf0e0; which is the code for fa-envelope -->
<input type="text" placeholder="&#xf0e0; E-mail" name="email" />
3