一。用css雪碧图
二。用font-html
三。用font-css
一。css雪碧图是通过背景图片的定位方式在确定图标的位置，最终实现效果的
二。
用字体画icon需要借助一个网站：https://icomoon.io/app/#/select
//font+html实现，此方法可以兼容IE低版本。
.sprite{
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li{
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}
.sprite li s{
margin:0 10px;
}
.sprite li:hover{
background-color: #fff;
border-color: #fff
}
.sprite li:hover a{
color: #b51600;
}
@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.imooc-icon{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size:20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/fontHTML.css"/>
<title>字体图标icon</title>
</head>
<body>
<ul class="sprite">
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好1</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好2</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好3</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好4</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好5</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好6</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好7</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好8</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好9</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好10</a>
</li>
<li>
<a href=""><s class="imooc-icon"></s>慕课网就是好11</a>
</li>
</ul>
</body>
</html>
//font+css画图标， 此方法不支持IE8以下版本
.sprite{
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li{
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}
.sprite li s{
margin:0 10px;
}
.sprite li:hover{
background-color: #fff;
border-color: #fff
}
.sprite li:hover a{
color: #b51600;
}
@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.imooc-icon{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size:20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-list:before{
content: "\e903"
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/fontCSS.css"/>
<title>font-css</title>
</head>
<!--IE8以下不兼容-->
<body>
<ul class="sprite">
<li>
<a href=""><s class="imooc-icon icon-list"></s>慕课网就是好1</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好2</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好3</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好4</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好5</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好6</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好7</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好8</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好9</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好10</a>
</li>
<li>
<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好11</a>
</li>
</ul>
</body>
</html>
实在不知道如何解释，提醒各位可以上慕课网：http://www.imooc.com/video/5431上面听一下，会受益匪浅。
原文：http://www.cnblogs.com/luoguixin/p/6273049.html