阿里巴巴矢量图icon引用方法和与文字对齐的解决方法

平时写界面时经常要引用阿里巴巴矢量图icon（http://www.iconfont.cn/），
（一）引用icon有两种方法：
（1）直接在html里面添加i标签（效果图如下）：

<!--html-->
<div class="active-focus">
   <i class="icon iconfont icon-eye"></i>
   <p>23</p>
   <i class="icon iconfont icon-person"></i>
   <p>0</p>
</div>
<!--css里面给icon设置样式-->
<style>
i {
    font-size: 10px;//此行设置icon大小
    color: #999999;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
   }
</style>

！！！实现前提要引入icon相关文件配置，详细教程见：http://www.iconfont.cn/help/detail?helptype=code

icon的大小设置可以使用font-size属性来调节icon的大小，给我们日常开发带来了很大的好处。
（2）UI帮忙切好的图，即直接引用.png格式，与日常引用背景图一个原理，其中icon图标可以选择span标签来存放，在css里面引入icon图片：

<!--html-->
<p class="u-weizhi"><span></span>广州天河新塘路科学大道起点国际创新工场</p>
<p class="u-date"><span></span>报名时间:07-30至08-07</p>
<p class="u-active"><span></span>活动时间:08-08至08-10</p>
<!--css-->
<style>
span{
width:32px;
heigth:32px;
background-size:url("../img/jifen");
background-size(100%);
}
</style>

（二）icon与我们的文字并不对齐，又开始犯强迫症了，如下：

解决方法：给icon添加css,加入以下两行代码即可：

position:relative;
top:0.1rem;//对应高度自己看着调试

即可得到以下效果（一下治好了gaisi的强迫症）：