用字体在网页中画icon图标
第一步：获取字体资源
IconMoon网站
https://icomoon.io
iconMoon中有很多免费小图标可用，还能设置下载图标的使用属性（通过网站中设立的按钮preferences来设置）。
它有“Use i”使用<i>标签来画图标；“Use Attribute Selectors”使用属性选择器；“Use a Class”使用class属性。
使用<i>标签时，会将font-family等字体值赋值给所有<i>标签。
使用属性选择器时，会将font-family等字体值赋值给[class^="icon-"],[class*=" icon-"]
使用class属性，会将font-family等字体值赋值给.icon
无论使用以上哪种方式，都要先用@font-face引入字体。
第二步：选择制作方式
方式1：CSS Sprite
也叫CSS精灵，是一项使用背景图片定位，在网页中画icon图标的技术。
它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫“图片拼合”技术。
1、好处：减少文件体积和服务器请次数，从而提高效率。
2、坏处：你需要预先确定好每个图标的大小及图标间的间距，且图标的样式不能再改变
3、图片：需要将图片保存为PNG-24的文件格式。
4、原理：
其实就是将所有的小图片做在一张图中，然后在每个<li>标签中都导入这张图作为背景图，然后使用background-position对图片进行定位（注意，在每个html元素中，背景图片都是从左上角开始显示的，显示不了的地方会被自动隐藏），定位到需要显示的图标位置，超出<li>标签宽高的部分就隐藏。 需要设置background-image和background-position的属性。
5、一般写法：
background-image:url(images/bgimage.gif);
background-position: 0 -80px;
(0是left的值，-80px是top的值，也就是图片向上隐藏了80px。这两个值可以自己根据需要小图标显示的位置而设立，可以取负值)
方式2：font字体 + HTML
使用字体库以文本形式在网页中画小图标，可用CSS控制其样式
1、优点：
（1）灵活性：轻松地改变其他CSS效果或使用color值改变图标的颜色
（2）可扩展：使用font-size可轻松改变图标大小
（3）图标是矢量的，缩放图标不会影响清晰度
（4）兼容性：字体图标支持所有一般写法：现代浏览器（包括糟糕的IE6）
（5）本地使用：通过添加制定字体到本地系统，可以再不同的设计和编辑应用程序中使用它们
2、一般写法：
@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
/*.eot?#iefix是兼容IE6-IE8*/
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;
}
/*用于图标抗锯齿，光滑显示，写在所有图标元素的公共类里面*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
<!--html中的写法-->
<li><a href=""><i style="color: #efe0ce;" class="imooc-icon"></i></a></li>
3、写法说明：
<li>标签中的如这样的值是16进制数值，是每个icon小图标显示的时候的默认代码。刚开始得到的是f048;这样的值，需要自己加上&#x，浏览器才能识别。
注意有些字体库不是这样使用的，有些是用class属性来决定要显示的是哪个图标，而不是使用16进制数值。
方式3：font字体 + CSS
1、用@font-face引入字体，写法与方式2的相同
2、使用CSS内容：
before伪元素或者after伪元素
伪元素的content属性
*伪元素：创建一个虚假的元素，并插入到目标元素内容之前
语法： 固定元素:伪元素{}
固定类:伪元素{}
3、插入的内容由content属性来制定。
/*这里的.icon-music的class名称是可以随意起的，只需把名称复制粘贴到html代码中就行*/
.icon-music:before{
/*这里的16进制数值是代表小图标的内容。
在16进制的值前面，加上反斜线"\"进行转义*/
content: "\e605";
}
总结：三种方法对比
CSS sprite 兼容所有主流浏览器低版本
font+HTML 兼容所有主流浏览器低版本
font+css 不支持低版本浏览器
【参考资料】
慕课网 http://www.imooc.com/learn/243
特别鸣谢慕课网的至尊玉老师!