字体图标的好处
轻量性：一个图标字体比一系列的图像要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

兼容性：网页字体支持所有现代浏览器，包括IE低版本。最大的好处，在于它不会变形和加载速度快。字体图标可以像文字一样，随意通过 CSS来控制它的大小和颜色。

本篇文章主要分享国外字体图标ICOMOON创建及详细的引用使用教程：

1、进入ICOMOON官网 https://icomoon.io/
通过ICOMONN URL进入官网，点击右上角的“IcoMoon App”

2、选择图集和字体图标
-进入icomoon app页面后，默认有一个ICOmoon-free图集，如果需要其他的图集，页面底部选择“Add Icons From Library”
-通过鼠标左键点击图标进行选择，选择的图标会加亮，再次点击是取消。底部Selection()表示选择的图标个数。
-图标选择好后，点击右下角的“Generate Font”即可以生成图标文件。

3、预览选择的字体图标和调用代码
-如下图所示，将鼠标移动到对应图标上，点击显示的“Get Code”获取该图标的调用方式，主要是在元素中加Class名。

-点击右下角“Download”下载生成的字体图标压缩文件。

4、解压字体图标文件并应用
解压ICOmoon压缩文恶剪，解压后文件如下图所示。将fonts文件夹复制到项目CSS目录中。
将style.css文件中的内容，复制到项目Css文件的顶部。

完成以上操作后，在项目中变更元素的Class名时，就可以在网页中预览到对应的图标了。在通过调整元素位置，就可以达到想要的效果了。