使用字体图标

说明：使用字体图标

推荐网站：Icon Font & SVG Icon Sets ❍ IcoMoon

https://icomoon.io/

使用步骤：

1.选择字体图标

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

网站主页

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

选择系统的图标

选择系统图标

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

导入svg文件

选择svg文件

选择svg文件

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

自定义图标展示

2.下载文字图标

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

Generate Font

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

Download

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

下载的文件夹内容

3.引用文字图标

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

获取fonts文件夹

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

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

    

        
    

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

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

下载文件中的demo.html文件

打开demo.html，并复制对应图标中的小方块（红色箭头所指的方块），并将小方块放入span标签中：

复制要使用的文字图标的小方块

最后打开我们的html文件：可以看到我们已经成功使用了文字图标

使用效果图

4.追加文字图标

其实很多时候我们使用的图标不是一次就能选择完的，有时候还要往下载的fonts中追加一些问题图标，那如何追加呢？

1）导入json文件
在网站中导入我们上次下载的selection.json文件

导入json文件

选择YES

选择YES

2）可以看到网站中已经有我们的选择的一些文字图标了

image.png

3）此时我们可以追加一些想要的文字图标，并下载下来，替换我们上次下载的文件夹即可，就能实现问题图标的追加。

注意：
使用时，要在我们的文件夹中用新的下载的fonts文件夹，替换我们上一次下载的fonts文件夹。