图标字体的优势和劣势
优势
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。
灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！
兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。
劣势
图标字体只能被渲染成单色，或者是CSS3的渐变色
版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高
图标字体的制作
1、网址：https://icomoon.io
2、点击左上角的IcoMoon App
3、进入之后点击Import Icons把SVG图片上传上去
4、全选上传上去的图片，点击右下角的Generate Font
5、每个项目下都会有一个Get Code按钮，点击它会出现一个使用方法的弹窗
6、点击左上角的Preferences，在Font Name中设置生成字体的名称
7、设置好之后，关闭弹出窗口，点击右下角的Download按钮进行下载
8、打开下载好的压缩包，把fonts目录下的文件拷贝到任意目录下。之后就可以通过之前Get Code按钮下提供的使用方法进行使用。
来源：CSDN
作者：zcy.1548759321
链接：https://blog.csdn.net/zcy_1548759321/article/details/103827018