【CSS3】CSS字体图标

发现了一个超好玩的东西，字体图标
1 产生由来：图片是有诸多优点的，但是缺点也很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能，更重要的是图片不能很好的进行缩放，因为图片放大和缩小会失真。在移动端响应式模式下，很多情况我们希望我们的图标是可以进行缩放的，这就可以用到字体图标技术。
2 字体图标的优点：
1） 可以做出跟图片一样可以做的事情，改变透明度，旋转度，透明效果等等
2） 本质是文字，可以随意的改变颜色，产生阴影，透明效果等等
3） 本身体积更小，但是携带的信息并没有消减
4） 几乎支持所有的浏览器
5） 移动端设备必备良药

3 使用流程
1）UI人员设计字体图标效果图（svg）
2) 前端人员上传生成兼容性字体文件包
3）前端人员下载兼容字体文件包到本地
4）把字体文件包引入到HTML页面中
4 使用步骤：
1） 在样式中声明字体
2） 在盒子中引用字体
3 ）盒子里面添加结构

一般需要UI人员设计的图标很少，因为有很多现成的网站提供一些字体图标，比如：链接: https://icomoon.io.
还有https://www.iconfont.c