使用步骤：

1.选择字体图标

1）登录网站，点击所示图标：

网站主页

2）在显示的页面中选择系统的图标或者导入自己的图标（svg格式）：

选择系统的图标

选择系统图标
导入自己的图标（SVG格式）：
点击导入 icon

导入svg文件

选择svg文件

导入之后并选择自定义图标

自定义图标展示

2.下载文字图标

选择系统自带的图标和自定义的图标之后，点击 Generate Font

Generate Font

点击之后在显示的页面中我们可以看到我们选择的图标和系统的图标都显示出来了，此时点击Download

Download

下载的文件夹内容如图示：

下载的文件夹内容

3.引用文字图标

1）将download下来的fonts文件夹放到我们的业务文件夹中。

获取fonts文件夹

2）将@font-face引入到代码中，告诉别人我们自己引用的字体，并把我们的字体命名为myfont。

<style>
@font-face {
     font-family: 'myfont';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
    }
</style>

3）给盒子使用我们的字体，并给span标签添加我们的字体样式

<style>
@font-face {
     font-family: 'myfont';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
    }
    span {
        font-family: myfont;
        font-size: 50px;
    }
</style>
<body>
    <div>
        <span></span>
    </div>
</body>

其中，span中的小方块是从demo.html中复制的，复制步骤如下：

从下载的文件夹在找到demo.html文件