Font Awesome 和文本都在占位符中
Font Awesome and text both in placeholder
我想在下面的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>
要完成此操作,请使用 FontAwesome 作为字体,方法是将 CSS font-family
设置为 FontAwesome
并使用 FontAwesome Unicode reference.[=15 引用您想要的图标=]
例如,要让 fa-envelope
出现在占位符中,您可以使用以下内容:
<style type="text/css">
input {font-family:FontAwesome;}
</style>
<!-- use  which is the code for fa-envelope -->
<input type="text" placeholder=" E-mail" name="email" />
我想在下面的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>
要完成此操作,请使用 FontAwesome 作为字体,方法是将 CSS font-family
设置为 FontAwesome
并使用 FontAwesome Unicode reference.[=15 引用您想要的图标=]
例如,要让 fa-envelope
出现在占位符中,您可以使用以下内容:
<style type="text/css">
input {font-family:FontAwesome;}
</style>
<!-- use  which is the code for fa-envelope -->
<input type="text" placeholder=" E-mail" name="email" />