把许多小图标集中在一张背景透明的图片上，这种图片叫做精灵图，如下图。

        在线工具地址：http://www.spritecow.com/

        通过工具可以快速找到图标在精灵图上的坐标位置。

        首先，我们打开工具地址，点击第一个按钮。

        点击后，我们选择精灵图，打开。

 

        然后我们就可以进入到精灵图的界面，我们点击需要的元素，就可以获取该图的坐标信息。

 

         

        一般设置两个属性给图标，一个是icon，另一个是icon-n(1,2,3,...)，icon属性用于设置公共的css属性，包括转i标签为行内块、精灵图的背景、图片不重复等，写作：

.icon {
    /* 将i标签改成行内块 */
    display: inline-block;
    /* 设置背景 */
    background-image: url(../img/index.png);
    background-repeat: no-repeat;
}

        假设要设置红色的播放器，我们选中这个播放器，查看他的相关属性

        复制过来，写到css属性中即可。 

.icon-1 {
    width: 22px;
    height: 22px;
    background-position: -267px -205px;
}