字体图标顾名思义就是可以像字体一样使用的图标，你可以像定义字体一样定义它，用font-size给他大小，用color给他颜色，用font-style给他样式。他就像一个字体，只不过他的样子是图标而已。
就像这样的图标，他们并不是用图片，而是就如同一个字体。
字体图标的好处
前端有一个代称就是切图，切下来一张张图，用<img>或者用background来把图片呈现出来。而图片一个最大的弊端。占宽带大，网速不好时加载慢。一旦放大可能容易失真。没法随意的更改颜色。
而字体图标你可以随便放大缩小，只需要改变字体大小，而且永远不会失真。你需要在点击后换一个颜色，无需用js那么麻烦。只需要换一下color。是不是很方便？
如何得到字体图标
这里推荐两个字体图库，第一个是iconfont，这个是我认为最好的。你现在网站上挑选自己要的图标，然后加入购物车，最后一起存为项目。保存到本地。这样一套自己需要的字体图标就搞定了。
第二 个是font-awesome，这一阵套字体库。bootstrap用的就是这一套字体库。缺点是使用无法定制。不如iconfont方便。
你也可以自己制作字体图标，用AI画出后转为SVG格式。这里不多赘述字体图标的制作，因为现成的意见够我们用了。
如何使用字体图标
通过iconfont和fontawesome得到的字体图标，会一个文件夹内包含很多文件。如下图
你不用管太多，直接引入这些文件中的iconfont.css文件就好。当然你也可以不引入css文件，用自己写的css文件，你只需要在自己的css文件中@font-face引入字体图标文件。像这样。
然后就可以开始使用了，这里演示做一个火焰的图标。
使用非常简单，如果你是引入了iconfont.css文件。你只需要给要加入图标的地方加上类名就好。
在iconfont.css文件中，我们看到我们要引入的火焰图标的类名为icon-huo(这个名字是自动生成的）.
接着我们做一个span标签，并给他加入iconfont和icon-huo类名。
效果就出来了
如果你要改变他的大小和，颜色。特别简单
直接改变字体大小和颜色。这里为了演示方便直接写在了html里，规范应该在加入一个类，写在css里。
而且一点都没失真有没有，这样可以完美适应，并且以后做点击后变色效果，再也不用换背景图片了。
当然你也可以不用iconfont.css文件提供的类名，你可以自己定义类，但是定义类后要这样写
注意一定要
1一定要加上font-family:“iconfont”(从iconfont上下载图标字体都叫这个，fontAwesome上下载的叫fontAwesome；
2，:before或者:after插入一个元素，设置content为图标对应的十六进制码。每个图标对应的十六进制码，可以在iconfont.css文件中看到。
把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了，具体的democan参见demo。
循环动画由几幅画面构成，要根据动作的循环规律确定。但是，只有三张以上的画面才能产生循环变化效果，两幅画面只能起到晃动的效果。
在循环动画中有一种特殊情况，就是反向循环。比如鞠躬的过程，可以只制作弯腰动作的画面，因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法，可以减轻工作量，大大提高工作效率。因此在动画制作中，要养成使用循环动画的习惯。
物体的变化，可以分解为连续重复而有规律的变化。因此在动画制作中，可以尽制作几幅画面，然后像走马灯一样重复循环使用，长时间播放，这就是循环动画。
动画中的常用方法：
动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑，鸟飞翔，轮子的转动，机械运动以及有规律的曲线运动、圆周运动等等，都可以采用循环动画。
但事情总是一分为二的，循环动画的不足之处就是动作比较死板，缺少变化。为此，长时间的循环动画，应该进一步采用多套循环动画的方式进行处理。
