<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/masicon.css"/>
</head>
<style>	
[class*="mas-i-"]:before{
	font-size:1.5rem;
	color:green;
}
[class*="mas-i-"]:after{
	padding-left:10px;
	content:attr(class);
}
.text-input {
	padding-left: 30px;
}
.text-input:before {
	content: 'xue';
}
</style>
<body>
<input class="text-input" type="text" >
	<div >text</div>
</input>
<br/><hr/><br/>
	<div class="masicons">
		<div class="mas-i-user-back"></div>
		<div class="mas-i-user-sector"></div>
		<div class="mas-i-user-job"></div>
		<div class="mas-i-user-user"></div>
		<div class="mas-i-user-corporate"></div>
		<div class="mas-i-user-logout"></div>
		<div class="mas-i-user-username"></div>
		<div class="mas-i-user-nickname"></div>		
		<div class="mas-i-order-chat"></div>
		<div class="mas-i-order-refuse"></div>
		<br/><br/>
		<div class="mas-i-order-nod"></div>
		<div class="mas-i-order-transfer"></div>
		<div class="mas-i-ok"></div>
		<div class="mas-i-no"></div>
		<div class="mas-i-arrow-left"></div>
		<div class="mas-i-arrow-up"></div>
		<div class="mas-i-arrow-down"></div>
		<div class="mas-i-right"></div>
		<div class="mas-i-setting"></div>
		<div class="mas-i-select-all"></div>
		<br/><br/>
		<div class="mas-i-person"></div>
		<div class="mas-i-common-phrase"></div>
		<div class="mas-i-next-person"></div>
		<div class="mas-i-handle-opinion"></div>
		<div class="mas-i-apply-pay"></div>
		<div class="mas-i-query"></div>
		<div class="mas-i-approve"></div>
		<div class="mas-i-home"></div>
		<div class="mas-i-bottom-next"></div>
		<div class="mas-i-high-back"></div>

		<div class="mas-i-apprve-type"></div>
	</div>





	<br/><hr/>
	以下为测试代码。。。。
	<br/><br/>
	<style>
	.test_icons{	font-family:MAS_XueBoren; }
	.test_char_icon div:before{
		font-family:MAS_XueBoren;
		font-size: 5rem;
	}
	.test_char_icon div:after{	content: attr(class); }
	.number_0:before{ content: "\030"; 	}
	.char_A:before{	content: '\041';	}
	.char_a:before{	content: '\61';	}
	.test_00:before{ 	content: '\00';	}
	.test_01:before{  content: '\01';	}

	.icon_f1e3:before{	content: "\f1e3"; }
	.icon_f0000:before{ content: "\f0000"; }
	.icon_f0001:before{ content: "\f0001"; }
	.icon_f0002:before{ content: "\f0002"; }
	</style>
	<div class="test_icons">
		0123456789
	</div>
	<div class="test_char_icon">
		<div class="number_0"></div>
		<div class="char_A"></div>
		<div class="char_a"></div>
		<div class="test_00"></div>
		<div class="test_01"></div>

		<div class="icon_f1e3"></div>
		<div class="icon_f0000"></div>
		<div class="icon_f0001"></div>
		<div class="icon_f0002"></div>
	</div>
</body>
</html>