平時寫介面時經常要引用，
（一）引用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的大小設定可以使用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的強迫症）：