www.spritecow.com

5133761606664c8dbadffe679108f17c.png

  <i class="hot-icon">
   </i> 
     <i class="hot-icon2">
   </i> 

 .hot-icon{
    background-image: url(./image/topbar_sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-position: -192px 0;
    width: 26px;
    height: 13px;
  }
   .hot-icon2{
    background: url('./image/topbar_sprite.png') no-repeat -100px -140px;
      width: 90px;
      height: 32px;
    display: inline-block;
  }

或者
<i class="top-bar hot-icon">
</i> 
 <i class="top-bar hot-icon2">
  </i> 

.top-bar{
    background-image: url(./image/topbar_sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
}
 .hot-icon{
    background-position: -192px 0;
    width: 26px;
    height: 13px;
  }
 .hot-icon2{
    background-position: -100px -140px;
    width: 90px;
    height: 32px;
  }