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:4p旌忭檀挢x; 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>