<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<link rel="stylesheet" href="css/index.css">
???<link rel="stylesheet" href="css/font-awesome-4.5.0/css/font-awesome.css">
???<style>
???????*{
???????????margin: 0px;
???????????padding: 0px;
???????}
???????body{
???????????background:red;
???????}
???????.box{
???????????width: 280px;
???????????height: 260px;
???????????background:#ffffff;
???????????margin: 50px auto;
???????????text-align:center;
???????????position: relative;
???????}
???????.box input{
???????????margin-left: 20px;
???????????width: 210px;
???????????height: 27px;
???????}
???????.box .text{
???????????margin-top: 25px;
???????}
???????div{
???????????margin-top: 10px;
???????}
???????.hide{
???????????position: absolute;
???????????top: 100px;
???????????left: 23px;
???????????margin-top: 10px;
???????????width: 220px;
???????}
???????.box .form .loginbtn .btn{
???????????display: inline-block;
???????????width: 210px;
???????????height: 25px;
???????????line-height: 25px;
???????????background:red;
???????????color:#fff;
???????????text-decoration:none;
???????????margin-top: 10px;
???????????margin-left: 20px;
???????????position: absolute;
???????????top: 175px;
???????????left: 14px;
???????}
???????h2{
???????????font-size: 18px;
???????}
???????.title{
???????????padding-top: 10px;
???????}
???????.zy{
???????????position: absolute;
???????????top: 110px;
???????????right: 30px;
???????????cursor:pointer;
???????}
???????.by{
???????????position: absolute;
???????????top: 110px;
???????????right: 30px;
???????????z-index: 999;
???????????cursor:pointer;
???????}
???????.zy i,.by i{
???????????font-size: 30px;
???????}
???????.password .pass{
???????????margin-left: 20px;
???????}
???????.login i{
???????????width: 17px;
???????????height: 17px;
???????????padding: 6px;
???????????border: 1px solid #999999;
???????????border-right: none;
???????????background: #cccccc;
???????????color: #666;
???????????position: absolute;
???????????top: 69px;
???????????left: 13px;
???????}
???????.word i{
????????????width: 17px;
????????????height: 17px;
????????????padding: 6px;
????????????border: 1px solid #999999;
????????????border-right: none;
????????????background: #cccccc;
????????????color: #666;
????????????position: absolute;
????????????top: 110px;
????????????left: 13px;
????????}
???</style>
</head>
<body>
???<div class="box">
???????<div class="form">
???????????<div class="title">
???????????????<h2>登录</h2>
???????</div>
???????????<div class="login">
???????????????<span class="logn"><i class="fa fa-file-movie-o" aria-hidden="true"></i></span>
???????????????<!--<span class="logn"><i class="iconfont"></i></span>-->
???????????????<input type="text" class="text"placeholder="请输入账号">
???????????</div>
???????????<div class="password">
???????????????<span class="word"><i class="iconfont"></i></span>
???????????????<input type="password"class="pass" placeholder="请输入密码">
???????????????<span class="word"><i class="iconfont"></i></span>
???????????????<input type="text"style="display: none" class="hide" placeholder="请输入密码">
???????????????<span class="show by"><i class="iconfont"></i></span>
???????????????<span class="show zy"style="display: none"><i class="iconfont"></i></span>
???????????</div>
???????????<div class="loginbtn">
???????????????<a href="javascript:;"class="btn">登录</a>
???????????</div>
???????</div>
???</div>
</body>
<script src="jquery-1.12.2.min.js"></script>
<script>
???$(function(){
???????var arr = "";
???????var a =0;
???????$(".password .pass").change(function(){
???????????arr = $(‘.password .pass‘).val();
???????????$(‘.password .hide‘).val(arr);
???????});
???????$(".password .hide").change(function(){
???????????arr = $(‘.password .hide‘).val();
???????????$(‘.password .pass‘).val(arr);
???????});
???????$(".password .show").click(function(){
???????????a++;
???????????if(a%2==1){
???????????????$(‘.password .pass‘).hide();
???????????????$(‘.password .hide‘).show();
???????????????$(‘.password .by‘).hide();
???????????????$(‘.password .zy‘).show();
???????????}
???????????if(a%2==0){
???????????????$(‘.password .pass‘).show();
???????????????$(‘.password .hide‘).hide();
???????????????$(‘.password .by‘).show();
???????????????$(‘.password .zy‘).hide();
???????????}
???????});
???});
</script>
</html>
font-awesome-4.5.0/css/font-awesome.css字体图标的应用
原文地址：http://www.cnblogs.com/xlhlcy/p/7619814.html