http://www.w3cplus.com/mobile/mobile-terminal-refactoring-icons.html
凭借优秀的css3,我们可以应用其中一些属性绘制一些简单的图标,如箭头等,这里我们以绘制checkbox两种状态为例:
html:
<i class="icon-checkbox active"></i>
<i class="icon-checkbox"></i>
scss:
.icon-checkbox{
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #fff;
line-height: 1;
text-align: center;
margin-right: 5px;
&.active{
border-color: $primary;
&::after{
content: "";
width: 8px;
height: 3px;
border-bottom: 2px solid $primary;
border-left: 2px solid $primary;
display: block;
margin-top: 3px;
margin-left: 2px;
@include rotate(-45deg);
}
}
}
active状态,通过after生成一个长方形,然后设置其border-bottom和border-left,再通过css3的rotate旋转45即可,那个勾就是两条边框。