字體真棒和文字都在佔位符

我想在同一時間添加的字體真棒和文本佔位符下面的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>

來源

2015-06-14 Ethereal soul

''我可以這樣做@ sharf –

要做到這一點，請使用FontAwesome作爲字體，方法是將CSS font-family設置爲FontAwesome，並使用FontAwesome Unicode reference來引用所需的圖標。

例如，爲了有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" />

來源

2015-06-14 20:24:08 Grokify

任何人都可以告訴我什麼是錯誤的佔位符與真棒字體？它在Firefox中工作，但在鉻它只是顯示部分form.click這裏的截圖[鏈接]（http://prntscr.com/7hbzk3） –

嘗試設置'行高'CSS屬性爲100％（或更高），例如'input {font-family：FontAwesome;行高：100％;}'。這在Chrome中適用於我。 Firefox和Safari沒有它。 – Grokify

字體真棒和文字都在佔位符

回答

相關問題