阿里巴巴矢量图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的强迫症）：