<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/font-awesome.css" rel="stylesheet">
<style type="text/css">
input[type=checkbox]+.lbl,
input[type=radio]+.lbl {
position: relative;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 18px;
min-width: 18px;
font-weight: normal;
cursor: pointer;
}
input[type=checkbox]+.lbl::before,
input[type=radio]+.lbl::before {
cursor: pointer;
font-family: fontAwesome;
font-weight: normal;
font-size: 12px;
color: #FFF;
content: "\a0";
background-color: #FAFAFA;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 1px;
position: relative;
top: -1px;
}
input[type=checkbox],
input[type=radio] {
opacity: 0;
position: absolute;
z-index: 1;
width: 18px;
height: 18px;
cursor: pointer;
}
input[type=checkbox]:checked+.lbl::before,
input[type=radio]:checked+.lbl::before {
display: inline-block;
content: '\f00c';
color: #32a3ce;
background-color: #F5F8FC;
border-color: #adb8c0;
}
</head>
</style>
<body>
<label>
<input name="form-field-checkbox" type="checkbox">
<span class="lbl"> choice 1</span>
</label>
</body>
</html>字体库可以到 http://fontawesome.dashgame.com/ 下载，使用csn有可能字体下载不下来