在网页中，存在图标在鼠标经过的时候改变颜色的情况：
正常状态
鼠标移入后状态
说明它并不是一个图片而是一个文字，这种文字就是用字体设置工具做成然后在做成字体文件安装到我们的电脑上显示完成。
背景：
还记得非主流时期那种bolingboling的个性签，因为之前的网页显示都是中规中矩的宋体、楷体、黑体·······等，为了美化我们的页面这种潮流便应运而生了。但是当时要完成这种效果只能通过把文字做成图片进行切图也就是web-safe的方法，这样一来整个网页会很大，在那个网费很贵网速有限的年代里加载一个页面变得非常的吃力。而现在我们的CSS3就提供了一个功能，允许网页设计师导入一些好看的字体文件，这里面的文字看起来像是一个图片其实是一些适量的文字。
语法：
@font-face规则
在CSS3之前，web设计师必须使用用户电脑上安装好的字体，但是有了CSS3设计师可以使用任何的字体。原理大概就是设计师可以先把字体存放到web服务器上面，在用户打开你的网页的时候浏览器自动下载到用户的电脑上这样用户看到的字体便是设计的字体。
用法：
首先先去下载一种自己喜欢的字体文件，这里推荐阿里爸爸家的矢量图标网站，全是免费的，下载代码之后会有一个文件教你怎么去用。
自带教程文件
以下被选中的文件是字体，后缀不一样代表支持的浏览器不一样，我们需要全部使用。
字体
这里就给操作一下：
1、首先在引入字体，这里我们必须给字体设置一个名称，mumu是我乱取的名字。每一个格式的我们都得引入。
引入字体
网页中使用它
从demo中找到自己想要得图标的unicode码
demo就是刚才的字体自带教程文件
然后我们进行调用
直接输入unicode编码
最后呈现在网页上的效果就是下面这样：
最终效果
2、当然我们不用那么麻烦，可以直接用link
link方法，直接用下载的字体里自带的css文件。
