1、首先需要写一个基本的HTML文档结构：
<html>
<body>
</body>
</html>
2、然后我们使用span标签来展示我们的图标
<span class="bbody">
<span class="demo">
</span>
</span>
电池也分为主体和头部 所以我们用两个span，当然也可以只用一个，然后使用
CSS :before 选择器 进行修改
3、首先设置span的公共属性
span{
display:block;
}
4、然后设置电池的主体部分
.bbody{
position:relative;
width:27px;
height:14px;
border:4px solid #333;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;}
这里需要给元素相对定位，以在下一步对头部进行绝对定位；
给span加上边框，并对边框进行修改就是主体部分了；
5、然后设置电池的头部
.btop{
position: relative;
height:8px;
width:4px;
background:#333;
display:block;
position:absolute;
top:3px;
left:31px; }
这里不设置span的边框，而是对span的背景进行填充即可；
绝对定位该span到主体的右侧中间
因为主体的宽是27px 再加上有边框的4px 所以距离左侧应该是31px
主体高是14px 边框4px 总体高度就是22px 中间位置就是11px 减去边框的4px后 中间位置是7px 再减去头部的一半8/2px后 距离top就是3px
6、将以上代码整合就是我们的电池图标啦
<html>
<body>
<style type="text/css">
span{
display:block;
}
/* 电池之体部分*/
.bbody{
position:relative;
width:27px;
height:14px;
border:4px solid #333;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;}
/* 电池头部部分*/
.btop{
position: relative;
height:8px;
width:4px;
background:#333;
display:block;
position:absolute;
top:3px;
left:31px; }
</style>
<span class="bbody">
<span class="btop"></span>
</span>
</body>
</html>
